当前位置: 代码迷 >> JavaScript >> div平滑移动超级难题。解决办法
  详细解决方案

div平滑移动超级难题。解决办法

热度:96   发布时间:2012-03-22 17:43:57.0
div平滑移动超级难题。。。。。


见识过了水平移动,垂直移动。。

但是貌似斜线平移似乎很有问题。。。。怎么移动啊。。。。没想过

------解决方案--------------------
参考:http://jsfiddle.net/zswang/nxk5A/
HTML code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by zswang</title>
  
  <script type='text/javascript' src='/js/lib/mootools-core-1.4.3-compat.js'></script>
  
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    #box1{
    position: absolute;
    width: 10px;
    height: 10px;
    background: red;
}
  </style>

  


<script type='text/javascript'>//<![CDATA[ 
window.addEvent('load', function() {
var AceGeometric = /^u/.test(typeof exports) ? AceGeometric || {} : exports;
void function(exports){
    /**
     * Ace Engine Geometric
     * 几何函数
     * @see http://code.google.com/p/ace-engine/wiki/AceGeometric
     * @author 王集鹄(wangjihu,http://weibo.com/zswang)
     * @version 1.0
     * @copyright www.baidu.com
     */
    
    var 
        math = Math, cos = math.cos, sin = math.sin, PI = math.PI, PI2 = PI * 2, min = math.min, max = math.max,
        atan = math.atan, sqrt = math.sqrt, pow = math.pow;

    /**
     * 计算点到点之间的距离
     * @param {Array[Number,Number]} a 坐标1
     * @param {Array[Number,Number]} b 坐标2
     */ 
    function pointToPoint(a, b){
          return sqrt(pow(a[0] - b[0], 2) + pow(a[1] - b[1], 2));
    }
    
    /**
     * 计算点的角度
     * @param {Array} origin 圆心坐标
     * @param {Array} point 点坐标
     * @param {Number} eccentricity 离心率
     */
    function pointToAngle(origin, point, eccentricity){
        if (/^u/.test(typeof eccentricity)) eccentricity = 1;
        if (point[0] == origin[0]) {
            if (point[1] > origin[1])
                return PI * 0.5;
            return PI * 1.5
        } else if (point[1] == origin[1]) {
            if (point[0] > origin[0])
                return 0;
            return PI;
        }
        var t = atan((origin[1] - point[1]) / (origin[0] - point[0]) * eccentricity);
        if (point[0] > origin[0] && point[1] < origin[1])
            return t + 2 * PI;
        if (point[0] > origin[0] && point[1] > origin[1])
            return t;
        return t + PI;
    }
    
    exports.pointToAngle = pointToAngle;
    exports.pointToPoint= pointToPoint;
}(AceGeometric);

//==DEMO==
void function(){
    var box1 = document.getElementById('box1'), currPoint = [0, 0], timer, speed = 5;
    document.onmousedown = function(e){
        e = e || event;
        timer && clearInterval(timer); // 清楚计时器
        newPoint = [e.clientX, e.clientY];
        timer = setInterval(function(){
            var len = AceGeometric.pointToPoint(currPoint, newPoint);
            if (len < 1){ // 两点间距离足够小
                clearInterval(timer);
                timer = 0;
            } else {
                var angle = AceGeometric.pointToAngle(currPoint, newPoint);
                currPoint = [currPoint[0] + Math.cos(angle) * Math.min(len / 2, speed), currPoint[1] + Math.sin(angle) * Math.min(len / 2, speed)];
                box1.style.left = currPoint[0] + 'px';
                box1.style.top = currPoint[1] + 'px';
            }
        }, 50);
    }
}();
});//]]>  
</script>
</head>
<body>
  <div id="box1"></div>
</body>
</html>

------解决方案--------------------
JScript code

<html>
    <body>
        <div id="test" style="width:100px;height:100px;position:absolute;border:1px solid red;">
        </div>
        <script>
            var test = document.getElementById("test");
            var width = document.body.clientWidth;
            var height = document.body.clientHeight;
            
            var isDown = true;
            var isRight = true;
            
            var x = 0;
            var y = 0;
            var speed = 10;
            var step = 1;
            
            function move()
            {
                if(isDown)
                {
                    y += step;
                    if(y >= (height-parseInt(test.style.height)))
                    {
                        isDown = false;
                    }
                }
                else
                {
                    y -= step;
                    if(y <= 0)
                    {
                        isDown = true;
                    }
                }
                
                if(isRight)
                {
                    x += step;
                    if(x >= (width-parseInt(test.style.width)))
                    {
                        isRight = false;
                    }
                }
                else
                {
                    x -= step;
                    if(x <= 0)
                    {
                        isRight = true;
                    }
                }
                
                test.style.left = x;
                test.style.top = y;
                setTimeout(move,speed);
            }
            setTimeout(move,speed);
            
            window.onresize = function(e)
            {
                width = document.body.clientWidth;
              height = document.body.clientHeight;
            }
        </script>
    </body>
</html> 
  相关解决方案