从零开始学习前端JAVASCRIPT — 十一、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

未完待续。。。。。。

1、运动原理

经过接二连三的改变物体的位置，而发生移动变化。

使用setInterval实现。

匀速运动：速度值一直保持不变。

多物体同时运动：将定时器绑设置为对象的一个属性。

注：物体每次运动都应该把以前的定时器清除掉。

2、边界处理

遇到边界是应该中止掉仍是反弹，方向相反。

改变物体运动方向：将物体的速度值取反。

3、加速减速

加速：速度愈来愈快。

减速：速度愈来愈慢。

4、抛物线

水平方向有一速度，垂直方向有一速度，并作自由落体。

5、透明度的变换

难点：处理低版本IE和其它浏览器的透明度兼容性问题。

注：IE7/8下：给对象添加opacity属性。

6、缓冲运动

7、多属性缓冲运动函数封装

在定时器内部添加一个标识来判断属性是否都完成。

8、圆周运动

  

9、链式运动（经过回调函数来完成）

 

/* 缓冲运动 obj：运动的对象 target：运动属性和终点值的对象 fn：回调函数 ratio：运动系数，默认值为8 */ function bufferMove(obj, target, fn, ratio = 8) { // 清除旧的定时器
 clearInterval(obj.timer); // 开启新的定时器
    obj.timer = setInterval(function () { var allOK = true; for(var attr in target) { // 获取当前值
            var cur = 0; if(attr === 'opacity') { cur = parseInt(getStyle(obj, 'opacity') * 100); } else { cur = parseInt(getStyle(obj, attr)); } // 计算速度
            var speed = (target[attr] - cur) / ratio; // 判断方向
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 计算下次的值
            var next = cur + speed; // 赋值
            if(attr === 'opacity') { obj.style.opacity = next / 100; obj.style.filter = 'alpha(opacity=' + next + ')'; } else { obj.style[attr] = next + 'px'; } // 判断当前属性是否运动完毕
            if(next !== target[attr]) { allOK = false; } } // 若是allOk为true，则说明全部的运动均已运动完毕
        if(allOK) { // 清除定时器
 clearInterval(obj.timer); // 执行回调函数
            if(fn) { fn(); } } }, 50); } /* 获取当前样式值 */ function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }

 附               录

1.无缝循环滚动轮播图

 

2.淘宝放大镜效果

  http://vip2.svnspot.com/rocky.javascript/ 

3.自适应瀑布流效果