零JS筆記 | javascript運動 | 弹性 | 碰撞

運動公式：

function sMove() {
        clearInterval(_t)
        _t = setInterval(function () {
//1、写两个速度公式
        _speed+=(500-div.offsetLeft)/6
        _speed*=0.75
//2、写两个停止条件 速度的绝对值，距离的绝对值
        if(Math.abs(_speed)<=1 && Math.abs(500-div.offsetLeft)<=1){
        clearInterval(_t)
//3/修正偏差
         div.style.left = '500px'
         _speed = 0;
        }
        else{
        div.style.left = div.offsetLeft+_speed+'px'
        }
    }, 30)
}

<div id="div1"><span>红眼睛幽幽的看着这孤城,如同苦笑挤出的高兴,浮华盛世做分手布景</span></div>
<div id="div2"><span>红眼睛幽幽的看着这孤城,如同苦笑挤出的高兴,浮华盛世做分手布景</span></div>

2、第一個div1定住不動；div2外層限制寬高加overflow:hidden; div2內層span設置定位，限制高，寬2000px;

#div2{color:#cd0000;height:36px;width:36px;overflow:hidden;}
#div2 span{position:absolute;left:0;top:0;width:2000px;height:20px}

3、理解，div2外層向左移動+1px/每次時，內層span2同時相反移動

setInterval(function(){
   div2.style.left = div2.offsetLeft+1+'px';
   span2.style.left = -div2.offsetLeft+'px';
},30)

so,彈性菜單的例子是：

1、佈局：mark為需要在上面運動的項；

<ul id="ul1">
    <li id="mark">
        <ul>
            <li>首页</li>
            <li>论坛</li>
            <li>视频</li>
            <li>留言</li>
        </ul>
    </li>
    <li class="box">首页</li>
    <li class="box">论坛</li>
    <li class="box">视频</li>
    <li class="box">留言</li>
</ul>

See the Pen gaGVEL by elmok (@elmok) on CodePen.

当attr = width || height 時，低IE會出現彈性過過界，不允許負值，即出現錯誤; 所以

var H = div.offsetHeight + _speed;
if(H<0){  //ie下元素的高度不能为负值；
    H=0;
}

弹性运动整合版

function sMove(obj, json, fn) {
    clearInterval(obj.timer);
    var json2 = copy(json);
    obj.timer = setInterval(function () {
        var bStop = true;
        for (var attr in json) {
            var iCur = 0;
            if (attr == 'opacity') {
                iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                iCur = parseInt(getStyle(obj, attr));
            }
            json2[attr] += (json[attr] - iCur) / 6;
            json2[attr] *= 0.75;
            if (Math.abs(json2[attr]) < 1 && Math.abs(json[attr] - iCur) <= 1) {
                if (attr == 'opacity')
                {
                    obj.style.filter = 'alpha(opacity:' + (json[attr]) + ')';
                    obj.style.opacity = (json[attr]) / 100;
                }
                else
                {
                    obj.style[attr] = json[attr] + 'px';
                }
            } else {
                bStop = false;
                if (attr == 'opacity')
                {
                    obj.style.filter = 'alpha(opacity:' + (iCur + json2[attr]) + ')';
                    obj.style.opacity = (iCur + json2[attr]) / 100;
                }
                else
                {
                    obj.style[attr] = Math.round(iCur + json2[attr]) + 'px';
                }
            }
        }
        if (bStop) {
            clearInterval(obj.timer);
            fn && fn.call(obj)
        }
    }, 30);
};
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false) [attr];
    }
}
function copy(obj) {
    var o = {
    };
    for (var i in obj) {
        o[i] = 0;
    }
    return o;
}

---

碰撞运动，找到临界点，再确定运动方向，改对应的速度 ,將速度取反；

var _div = document.getElementById('div1')
var _speedX = 10;
var _speedY = 10;
sMove()
//碰撞运动，1、找到临界点，再确定运动方向，改对应的速度 （速度取反）
function sMove(){
setInterval(function () {
    var L = _div.offsetLeft +_speedX;
    var T = _div.offsetTop +_speedY;
    if(T>document.documentElement.clientHeight-_div.offsetHeight){
        T =document.documentElement.clientHeight-_div.offsetHeight
        _speedY *=-1
    }
    if(T<0){
        T=0;
        _speedY*=-1 //又变为正
    }
    if(L>document.documentElement.clientWidth-_div.offsetWidth){
        L =document.documentElement.clientWidth-_div.offsetWidth
        _speedX *=-1
    }
    if(L<0){
        L=0;
        _speedX*=-1 //又变为正
    }
    _div.style.left = L +'px'
    _div.style.top = T +'px'

},30)
}

自由落體運動、拋物線運動

自由落體： 只需改變top值，接觸到目標點後速度取反向上運動，再使用摩擦系數使速度停下來；

拋物線： 添加left方向速度及判定，摩擦系數使速度停下來，注意初始化目標位置及初始化速度；

See the Pen ojodqO by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

iphone拖動效果

首先，拖動

obj.onmousedown = function(e){
    var e = e || event;
    ....
    document.onmousemove = function(e){
        ...
    }
    document.onmouseup = function(e){
        document.onmousemove = document.onmouseup = null;
        ...
    }
    return false;
}

mousemove，鼠標移動的距離 == 元素left值移動的距離 ul1.style.left = e.clientX-disX + 'px'
mouseup時，元素需要移動的距離為一個li的距離，產生的效果由彈性公式生成；
當mousedown時存鼠標位置downX,與抬起時位置對比,小於走左，大於走右；
使用變量inow++ --

See the Pen KdyRrX by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

公告碰撞效果

See the Pen meqLgV by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>