[关闭]
@fantaghiro 2014-10-17T17:06:56.000000Z 字数 28610 阅读 1577

JavaScript中的运动

js 学习笔记 妙味课堂

运动的基础原理

在js中，如何让一个页面元素动起来:

  1. <input type="button" value="动起来" id="btn" />
  2. <div id="div1"></div>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; }
  1. var oBtn = document.getElementById('btn');
  2. var oDiv = document.getElementById('div1');
  3. var iTimer = null;
  5. //点击按钮，让div1横向向右移动
  6. //定时器
  7. oBtn.onclick = function(){
  8.     clearInterval(iTimer);
  9.     iTimer = setInterval(function(){
  10.         //oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
  11.         if(oDiv.offsetLeft == 500){
  12.             clearInterval(iTimer);
  13.         } else {
  14.             oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
  15.         }
  16.     }, 30)
  17. }
  1. 清除定时器：保证运动过程中只有一个定时器在执行
  2. 开启定时器
  3. 开始运动（同时在运动中加入判断，以便在需要的时候或者是在满足某个要求的时候停止运动）

小数的计算精度问题

  1. //alert(0.1 + 0.2); // 0.3 -> 0.3000000004
  2. //alert(0.2 + 0.7); //0.9 -> 0.8999999999
  4. //近似值：可能比正确要小，也可能要比正确的大
  5. //近似值：进行“四舍五入”（不是真正的四舍五入）以后可以得到正确值

简单运动的函数封装

  1. function css(obj, attr){
  2.     if(obj.currentStyle){
  3.         return obj.currentStyle[attr];
  4.     } else {
  5.         return getComputedStyle(obj, false)[attr];
  6.     }
  7. }
  9. function startMove(obj, json, iSpeed, fn){
  10.     clearInterval(obj.iTimer);
  11.     var iCur = 0;
  13.     obj.iTimer = setInterval(function(){
  15.         var iBtn = true;
  17.         for(var attr in json){
  19.             var iTarget = json[attr];
  21.             if(attr == 'opacity'){
  22.                 iCur = Math.round(css(obj, 'opacity') * 100);
  23.             } else {
  24.                 iCur = parseInt(css(obj, attr));
  25.             }
  27.             if(iCur != iTarget){
  28.                 iBtn = false;
  29.                 if(attr == 'opacity'){
  30.                     obj.style.opacity = (iCur + iSpeed) / 100;
  31.                     obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
  32.                 } else {
  33.                     obj.style[attr] = iCur + iSpeed + 'px';
  34.                 }
  35.             }
  36.         }
  38.         if(iBtn){
  39.             clearInterval(obj.iTimer);
  40.             fn && fn.call(obj);
  41.         }
  43.     }, 30);
  44. }

摩擦运动

摩擦，减速：在运动过程中，速度越来越慢

让iSpeed在定时器里面递减即可。iSpeed -= 2; 或 iSpeed /= 2; 或 iSpeed *= 0.9; 但是这种方法不太好控制目标点。

缓冲运动

越接近目标点，速度越小。速度和距离成正比。

设置 iSpeed = ( 500 - oDiv.offsetLeft) * 0.2; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

CSS解析和js解析：

CSS解析是认小数点之后的值的，但是offsetLeft等等这些经过js运算过后的没有单位的值是不认小数点之后的值的（会将有小数点的值进行四舍五入运算）

运动框架加入缓冲模式

  1. function css(obj, attr){
  2.     if(obj.currentStyle){
  3.         return obj.currentStyle[attr];
  4.     } else {
  5.         return getComputedStyle(obj, false)[attr];
  6.     }
  7. }
  9. function startMove(obj, json, fn){
  10.     clearInterval(obj.iTimer);
  11.     var iCur = 0;
  12.     var iSpeed = 0; //速度初始化
  14.     obj.iTimer = setInterval(function(){
  16.         var iBtn = true;
  18.         for(var attr in json){
  20.             var iTarget = json[attr];
  22.             if(attr == 'opacity'){
  23.                 iCur = Math.round(css(obj, 'opacity') * 100);
  24.             } else {
  25.                 iCur = parseInt(css(obj, attr));
  26.             }
  28.             iSpeed = (iTarget - iCur) / 8;
  29.             iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  31.             if(iCur != iTarget){
  32.                 iBtn = false;
  33.                 if(attr == 'opacity'){
  34.                     obj.style.opacity = (iCur + iSpeed) / 100;
  35.                     obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
  36.                 } else {
  37.                     obj.style[attr] = iCur + iSpeed + 'px';
  38.                 }
  39.             }
  40.         }
  42.         if(iBtn){
  43.             clearInterval(obj.iTimer);
  44.             fn && fn.call(obj);
  45.         }
  47.     }, 30);
  48. }

运动框架的应用

多图展开收缩实例

  1. <ul id="ul1">
  2.     <li></li>
  3.     <li></li>
  4.     <li></li>
  5.     <li></li>
  6.     <li></li>
  7.     <li></li>
  8.     <li></li>
  9.     <li></li>
  10.     <li></li>
  11. </ul>
  1. body { margin: 0; }
  2. li { width: 100px; height: 100px; background: red; float: left; list-style: none; margin: 10px 0 0 10px; }
  3. #ul1 { margin: 0; padding: 0; width: 330px; margin: 100px auto 0; position: relative; }
  1. //要先引入startMove函数
  2. /*
  3. 元素居中放大：除了要改变元素的宽高以外，还要改变元素定位（left, top）
  4. 如果图片放大一倍，那么位移放大的宽高的一半。
  5. 元素必须是定位的。
  6. */
  8. window.onload = function(){
  10.     var oUl = document.getElementById('ul1');
  11.     var aLi = oUl.getElementsByTagName('li');
  12.     var arr = [];
  13.     var zIndex = 1;
  15.     for(var i=0; i<aLi.length; i++){
  16.         arr.push({left: aLi[i].offsetLeft, top: aLi[i].offsetTop});     
  17.     }
  19.     for(var i=0; i<aLi.length; i++){
  21.         aLi[i].index = i;
  23.         //在转化布局的时候，相对用户眼睛的位置保持不变。利用offsetLeft/offsetTop
  24.         //在用js去设置css样式的时候注意：在同一个代码块当中，有些css样式的设置的权限要高于其他的样式。因为在一个代码块中，position = 'absolute'先被解析了，而offsetLeft和offsetTop要经过运算后才解析，所以先定位成了absolute，然后再计算offsetLeft和offsetTop就出现了问题。因此要把offsetLeft和offsetTop的设置放在单独的代码块中先行解析。
  26.         /*
  27.         aLi[i].style.left = aLi[i].offsetLeft + 'px';
  28.         aLi[i].style.top = aLi[i].offsetTop + 'px';
  29.         */
  30.         aLi[i].style.left = arr[i].left + 'px';
  31.         aLi[i].style.top = arr[i].top + 'px';
  32.         aLi[i].style.position = 'absolute';
  33.         aLi[i].style.margin = '0px';
  35.         aLi[i].onmouseover = function(){
  37.             this.style.backgroundColor = 'green';
  38.             this.style.zIndex = zIndex++;
  40.             startMove(this, {
  41.                 width: 200,
  42.                 height: 200,
  43.                 left: arr[this.index].left - 50,
  44.                 top: arr[this.index].top - 50
  45.             });
  46.         }
  47.         aLi[i].onmouseout = function(){
  48.             startMove(this, {
  49.                 width: 100,
  50.                 height: 100,
  51.                 left: arr[this.index].left,
  52.                 top: arr[this.index].top
  53.             });
  54.         }
  56.     }
  58. }

带运动效果的留言本

  1. <textarea id="content" rows="10" cols="50"></textarea>
  2. <input type="button" value="留言" id="btn">
  3. <ul id="ul1"></ul>
  1. #ul1 { margin: 0; position: aboslute; right: 10px; top: 8px; width: 700px; height: 500px; border: 1px solid #000; padding: 10px; overflow: auto; }
  2. li { line-height: 28px; border-bottom: 1px dotted #000; list-style: none; word-break: break-all; overflow: hidden; }
  1. //先引入startMove函数
  2. window.onload = function(){
  4.     var oContent = document.getElementById('content');
  5.     var oBtn = document.getElementById('btn');
  6.     var oUl = document.getElementById('ul1');
  8.     oBtn.onclick = function(){
  10.         var oLi = document.createElement('li');
  11.         oLi.innerHTML = oContent.value;
  13.         if(oUl.children[0]){
  14.             oUl.insertBefore(oLi, oUl.children[0])
  15.         } else {
  16.             oUl.appendChild(oLi);
  17.         }
  19.         var iHeight = parseInt(css(oLi, 'height'));
  20.         oLi.style.height = '0px'; //初始化样式，然后再变
  21.         oLi.style.opacity = '0';
  22.         oLi.style.filter = 'alpha(opacity=0)';
  23.         startMove(oLi, {
  24.             height: iHeight,
  25.             opacity: 100
  26.         });
  27.     }
  28. }

淘宝幻灯片

  1. <div id="div1">
  2.     <ul id="ul1">
  3.         <li><img src="1.png"></li>
  4.         <li><img src="2.jpg"></li>
  5.         <li><img src="3.jpg"></li>
  6.         <li><img src="4.jpg"></li>
  7.         <li><img src="5.jpg"></li>
  8.         <li><img src="6.jpg"></li>
  9.     </ul>
  10.     <p>
  11.         <span></span>
  12.         <span></span>
  13.         <span></span>
  14.         <span></span>
  15.         <span></span>
  16.         <span></span>
  17.     </p>
  18. </div>
  1. #div1 { width: 520px; height: 280px; border: 1px solid #000; margin: 100px auto 0; position: relative; overflow: hidden; }
  2. #ul1 { position: absolute; left: 0; top: 0; margin: 0; padding: 0; }
  3. li { list-style: none; float: left; }
  4. img { display: block; }
  5. #div1 p { text-align: center; position: absolute; width: 100%; bottom: 10px; }
  6. #div1 p span { padding: 2px 9px; background: #ccc; border-radius: 50%; margin-left: 5px; cursor: pointer; }
  7. #div1 p span.current { background: #f90; }
  1. window.onload = function(){
  2.     var oDiv = document.getElementById('div1');
  3.     var oUl = document.getElementById('ul1');
  4.     var aLi = document.getElementsByTagName('li');
  5.     var aSpan = oDiv.getElementsByTagName('span');
  6.     var iLen = aLi.length;
  7.     var iWidth = aLi[0].offsetWidth;
  9.     oUl.style.width = iLen * iWidth + 'px';
  11.     for(var i=0; i<iLen; i++){
  12.         aSpan[i].index = i;
  13.         aSpan[i].onclick = function(){
  15.             for(var i=0; i<iLen; i++){
  16.                 aSpan[i].className = '';
  17.             }
  18.             this.className = 'current';
  19.             startMove(oUl, {
  20.                 left: -this.index * iWidth;
  21.             })
  22.         }
  23.     }
  25. }

带运动的返回顶部

  1. <body style="height: 2000px">
  2.     <div id="div1"></div>
  3. </body>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; right: 0; top: 0; }
  1. window.onload = function(){
  3.     var oDiv = document.getElementById('div1');
  4.     var iTimer = null;
  5.     var b = 0;
  7.     setTop();
  9.     window.onscroll = function(){
  11.         //console.log('2');
  12.         if(b != 1){
  13.             //如果b == 1，那么当前的scroll事件被定时器所触发；不过b != 1，那么就是非定时器的其他任何一个操作触发了该事件
  14.             clearInterval(iTimer);
  15.         }
  16.         b = 2;
  18.         setTop();
  19.     }
  21.     oDiv.onclick = function(){
  22.         clearInterval(iTimer);
  23.         var iCur = iSpeed = 0;
  24.         iTimer = setInterval(function(){
  25.             iCur = document.documentElement.scrollTop || document.body.scrollTop;
  26.             iSpeed = Math.floor((0 - iCur) / 8);
  27.             if(iCur == 0){
  28.                 clearInterval(iTimer);
  29.             } else {
  30.                 document.documentElement.scrollTop = document.body.scrollTop = iCur + iSpeed;
  31.             }
  32.             //console.log('1');
  33.             b = 1;  
  34.         }, 30)              
  35.     }
  37.     function setTop(){
  38.         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  39.         oDiv.style.top = scrollTop + document.documentElement.clientHeight - oDiv.offsetHeight + 'px';
  41.     }
  42. }

图片预加载

我们经常会用下载软件下载电视剧，一个电视剧可以有n集。

  1. 先把所有的集数全部下载完成，然后一个个开开心心地看。你真的开心吗？
  2. 我们先下一集，然后按完，看完以后再去下下一集，然后再看。
  3. 我们先下载第一集，下载完成以后，在看第一集的时候去下载后面的内容。这样，在看前面的内容的时候，把后面的下完，节约了很多时间。

图片预加载就是采用上述第3种方式：在页面刚打开的时候，去加载第一张图片。然后页面加载完成以后，在用户看的时间内，去加载后面的内容。那么我们必须有个工具（迅雷）-> Image对象。

图片预加载原理

  1. <img id="img1" src='' />
  1. window.onload = function(){
  3.     var oImage = new Image();
  4.     var oImg = document.getElementById('img1');
  6.     /*
  7.     属性：
  8.         src：当我们给Image对象的src属性赋值一个url的时候，这个Image对象就会去加载url资源。加载完成以后的资源被保存到了浏览器的缓存文件夹里面。下次如果我们要去调用这个url地址的时候，直接是从缓存文件夹读取到的。所以速度很快。
  9.     事件：
  10.         onload：当资源加载完成的时候触发
  11.         onerror：当资源加载失败的时候触发
  12.     */
  13.     oImage.src = '1.png';
  14.     oImage.onload = function(){
  15.         alert('加载完成');
  17.         document.onclick = function(){
  18.             oImg.src = '1.png';
  19.         }
  20.     }
  21.     oImage.onerror = function(){
  22.         alert('加载出错');
  23.     }
  25. }

图片预加载的应用实例

  1. <img src="1.jpg" id="img1" style="width: 300px;" />
  1. window.onload = function(){
  3.     var oImg = document.getElementById('img1');
  4.     var oImage = new Image();
  5.     var arr = [
  6.         '2.jpg',
  7.         '3.jpg',
  8.         '4.jpg',
  9.         '5.jpg',
  10.         '6.jpg',
  11.         '7.jpg'
  12.     ];
  13.     var iCur = 0;
  14.     var i = 0;
  16.     xunlei();
  18.     oImg.onclick = function(){
  19.         i++;
  20.         if(i < arr.length){
  21.             oImg.src = arr[i];
  22.         }
  23.     }
  25.     function xunlei(){
  26.         oImage.src = arr[iCur];
  27.         oImage.onload = function(){
  28.             iCur++;
  29.             if(iCur < arr.length){
  30.                 xunlei();
  31.             }
  32.         }
  33.     }
  35. }

图片的按需加载

  1. <ul id="ul1">
  2.     <li><img _src="1.jpg" src="white.jpg"></li>
  3.     <li><img _src="2.jpg" src="white.jpg"></li>
  4.     <li><img _src="3.jpg" src="white.jpg"></li>
  5.     <li><img _src="4.jpg" src="white.jpg"></li>
  6.     <li><img _src="5.jpg" src="white.jpg"></li>
  7.     <li><img _src="6.jpg" src="white.jpg"></li>
  8.     <li><img _src="7.jpg" src="white.jpg"></li>
  9.     <li><img _src="1.jpg" src="white.jpg"></li>
  10.     <li><img _src="2.jpg" src="white.jpg"></li>
  11.     <li><img _src="3.jpg" src="white.jpg"></li>
  12.     <li><img _src="4.jpg" src="white.jpg"></li>
  13.     <li><img _src="5.jpg" src="white.jpg"></li>
  14.     <li><img _src="6.jpg" src="white.jpg"></li>
  15.     <li><img _src="7.jpg" src="white.jpg"></li>
  16.     <li><img _src="1.jpg" src="white.jpg"></li>
  17.     <li><img _src="2.jpg" src="white.jpg"></li>
  18.     <li><img _src="3.jpg" src="white.jpg"></li>
  19.     <li><img _src="4.jpg" src="white.jpg"></li>
  20.     <li><img _src="5.jpg" src="white.jpg"></li>
  21.     <li><img _src="6.jpg" src="white.jpg"></li>
  22.     <li><img _src="7.jpg" src="white.jpg"></li>
  23.     <li><img _src="1.jpg" src="white.jpg"></li>
  24.     <li><img _src="2.jpg" src="white.jpg"></li>
  25.     <li><img _src="3.jpg" src="white.jpg"></li>
  26.     <li><img _src="4.jpg" src="white.jpg"></li>
  27.     <li><img _src="5.jpg" src="white.jpg"></li>
  28.     <li><img _src="6.jpg" src="white.jpg"></li>
  29.     <li><img _src="7.jpg" src="white.jpg"></li>
  30.     <li><img _src="1.jpg" src="white.jpg"></li>
  31.     <li><img _src="2.jpg" src="white.jpg"></li>
  32.     <li><img _src="3.jpg" src="white.jpg"></li>
  33.     <li><img _src="4.jpg" src="white.jpg"></li>
  34.     <li><img _src="5.jpg" src="white.jpg"></li>
  35.     <li><img _src="6.jpg" src="white.jpg"></li>
  36.     <li><img _src="7.jpg" src="white.jpg"></li>
  37.     <li><img _src="1.jpg" src="white.jpg"></li>
  38.     <li><img _src="2.jpg" src="white.jpg"></li>
  39.     <li><img _src="3.jpg" src="white.jpg"></li>
  40.     <li><img _src="4.jpg" src="white.jpg"></li>
  41.     <li><img _src="5.jpg" src="white.jpg"></li>
  42.     <li><img _src="6.jpg" src="white.jpg"></li>
  43.     <li><img _src="7.jpg" src="white.jpg"></li>
  44.     <li><img _src="1.jpg" src="white.jpg"></li>
  45.     <li><img _src="2.jpg" src="white.jpg"></li>
  46.     <li><img _src="3.jpg" src="white.jpg"></li>
  47.     <li><img _src="4.jpg" src="white.jpg"></li>
  48.     <li><img _src="5.jpg" src="white.jpg"></li>
  49.     <li><img _src="6.jpg" src="white.jpg"></li>
  50.     <li><img _src="7.jpg" src="white.jpg"></li>
  51. </ul>
  1. #ul1 { margin: 100px auto 0; padding: 0; }
  2. li { float: left; margin: 0 0 10px 10px; list-style: none; border: 1px solid black;}
  3. img { width: 300px; height: 200px; display: block; }
  1. window.onload = function(){
  2.     var oUl = document.getElementById('ul1');
  3.     var aImg = oUl.getElementsByTagName('img');
  5.     showImg();
  6.     window.onscroll = showImage;
  8.     function showImg(){
  10.         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  11.         for(var i=0; i<aImg.length; i++){
  12.             if(!aImg[i].isLoad && getTop(aImg[i]) < scrollTop + document.documentElement.clientHeight ){
  13.                 aImg[i].src = aImg[i].getAttribute('_src');
  14.                 aImg[i].isLoad = true;
  15.             }
  16.         }
  17.     }
  19.     function getTop(obj){
  20.         var iTop = 0;
  21.         while(obj){
  22.             iTop += obj.offsetTop;
  23.             obj = obj.offsetParent;
  24.         }
  25.         return iTop;
  26.     }
  27. }

弹性运动

加速运动

  1. <input type="button" value="开始运动" id="input1">
  2. <div id="div1"></div>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; }
  1. window.onload = function(){
  2.     var oInput = document.getElementById('input1');
  3.     var oDiv = document.getElementById('div1');
  4.     var timer = null;
  5.     var iSpeed = 0;
  7.     oInput.onclick = function(){
  8.         startMove();
  9.     }
  11.     function startMove(){
  13.         clearInterval(timer);
  14.         timer = setInterval(function(){
  16.             iSpeed += 3;
  17.             oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  19.         }, 30)
  20.     }
  21. }

减速运动

  1. window.onload = function(){
  2.     var oInput = document.getElementById('input1');
  3.     var oDiv = document.getElementById('div1');
  4.     var timer = null;
  5.     var iSpeed = 80;
  7.     oInput.onclick = function(){
  9.         startMove();
  11.     }
  13.     function startMove(){
  15.         clearInterval(timer);
  16.         timer = setInterval(function(){
  18.             iSpeed -= 3;
  19.             oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  21.         }, 30)
  23.     }
  24. }

弹性运动

  1. <input type="button" value="开始运动" id="input1">
  2. <div id="div1"></div>
  3. <div id="bg"></div>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; left: 0; }
  2. #bg { width: 1px; height: 500px; background: black; position: absolute; left: 500px; top: 0; }
  1. window.onload = function(){
  2.     var oInput = document.getElementById('input1');
  3.     var oDiv = document.getElementById('div1');
  4.     var timer = null;
  5.     var iSpeed = 0;
  7.     oInput.onclick = function(){
  9.         startMove();
  11.     }
  13.     function startMove(){
  15.         clearInterval(timer);
  16.         timer = setInterval(function(){
  18.             if(oDiv.offsetLeft < 500){
  19.                 iSpeed += 5;
  20.             } else {
  21.                 iSpeed -= 5;
  22.             }
  23.             oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  25.         }, 30)
  27.     }
  28. }

弹性运动带加速度

  1. window.onload = function(){
  2.     var oInput = document.getElementById('input1');
  3.     var oDiv = document.getElementById('div1');
  4.     var timer = null;
  5.     var iSpeed = 0;
  7.     oInput.onclick = function(){
  9.         startMove();
  11.     }
  13.     function startMove(){
  15.         clearInterval(timer);
  16.         timer = setInterval(function(){
  18.             // if(oDiv.offsetLeft < 500){
  19.             //  iSpeed += (500 - oDiv.offsetLeft)/50;
  20.             // } else {
  21.             //  iSpeed -= (oDiv.offsetLeft - 500)/50;
  22.             // }
  24.             iSpeed += (500 - oDiv.offsetLeft)/50;
  25.             oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  26.         }, 30)
  28.     }
  29. }

摩擦力：F = fM （f是摩擦系数、M是质量）

弹性运动带摩擦

  1. window.onload = function(){
  2.     var oInput = document.getElementById('input1');
  3.     var oDiv = document.getElementById('div1');
  4.     var timer = null;
  5.     var iSpeed = 0;
  7.     oInput.onclick = function(){
  9.         startMove();
  11.     }
  13.     function startMove(){
  15.         clearInterval(timer);
  16.         timer = setInterval(function(){
  18.             // if(oDiv.offsetLeft < 500){
  19.             //  iSpeed += (500 - oDiv.offsetLeft)/50;
  20.             // } else {
  21.             //  iSpeed -= (oDiv.offsetLeft - 500)/50;
  22.             // }
  24.             iSpeed += (500 - oDiv.offsetLeft)/50;
  25.             iSpeed *= 0.95;
  27.             if(Math.abs(iSpeed) <= 1 && Math.abs(500 - oDiv.offsetLeft) <=1 ){
  28.                 clearInterval(timer);
  29.                 oDiv.style.left = '500px';
  30.                 iSpeed = 0;
  31.             } else {
  32.                 oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
  33.             }
  37.         }, 30)
  39.     }
  40. }

弹性运动与缓冲运动的区别

弹性运动：

缓冲运动：

弹性菜单实例

  1. <ul id="ul1">
  2.     <li id="mark"></li>
  3.     <li class="box">首页</li>
  4.     <li class="box">论坛</li>
  5.     <li class="box">视频</li>
  6.     <li class="box">留言</li>
  7. </ul>
  1. * { margin: 0; padding: 0; }
  2. #ul1 { width: 428px; height: 30px; margin: 20px auto; position: relative; }
  3. #ul1 li { width: 100px; height: 30px; background: red; border: 1px #000 solid; margin-right: 5px; float: left; list-style: none; line-height: 30px; text-align: center; }
  4. #ul1 #mark { position: absolute; left: 0; top: 0; background: blue; height: 10px; }
  1. window.onload = function(){
  3.     var oMark = document.getElementById('mark');
  4.     var aBox = document.getElementsByClassName('box');
  5.     var timer = null
  6.     var iSpeed = 0;
  8.     for(var i=0; i<aBox.length; i++){
  9.         aBox[i].onmouseover = function(){
  10.             startMove(this.offsetLeft);
  11.         }
  12.         aBox[i].onmouseout = function(){
  13.             startMove(0);
  14.         }
  16.         function startMove(iTarget){
  17.             clearInterval(timer);
  18.             timer = setInterval(function(){
  19.                 iSpeed += (iTarget - oMark.offsetLeft) / 6;
  20.                 iSpeed *= 0.75;
  21.                 if(Math.abs(iSpeed) <= 1 && Math.abs(iTarget - oMark.offsetLeft) <= 1){
  22.                     clearInterval(timer);
  23.                     oMark.style.left = iTarget + 'px';
  24.                     iSpeed = 0;
  25.                 } else {
  26.                     oMark.style.left = oMark.offsetLeft + iSpeed + 'px';
  27.                 }
  28.             }, 30)
  29.         }
  30.     }
  32. }

弹性菜单优化

滚动歌词效果

  1. <div id="div1"><span>阿里的房间啊高领导看见噶的离开房间爱多了几分</span></div>
  2. <div id="div2"><span>阿里的房间啊高领导看见噶的离开房间爱多了几分</span></div>
  1. * { margin: 0; padding: 0; }
  2. #div1, #div2 { position: absolute; left: 0; top: 0; }
  3. #div2 { color: red; width: 15px; height: 16px; overflow: hidden; }
  4. #div2 span { position: absolute; left: 0; top: 0; width: 2000px; }
  1. window.onload = function(){
  3.     var oDiv2 = document.getElementById('div2');
  4.     var oSpan2 = oDiv2.getElementsByTagName('span')[0];
  6.     setInterval(function(){
  7.         oDiv2.style.left = oDiv2.offsetLeft + 1 + 'px';
  8.         oSpan2.style.left = -oDiv2.offsetLeft + 'px';
  9.     }, 30)
  11. }

弹性菜单实例优化

  1. <ul id="ul1">
  2.     <li id="mark">
  3.         <ul>
  4.             <li class="box">首页</li>
  5.             <li class="box">论坛</li>
  6.             <li class="box">视频</li>
  7.             <li class="box">留言</li>     
  8.         </ul>
  9.     </li>
  10.     <li class="box">首页</li>
  11.     <li class="box">论坛</li>
  12.     <li class="box">视频</li>
  13.     <li class="box">留言</li>
  14. </ul>
  1. * { margin: 0; padding: 0; }
  2. #ul1 { width: 428px; height: 30px; margin: 20px auto; position: relative; }
  3. #ul1 li { width: 100px; height: 30px; background: red; border: 1px #000 solid; margin-right: 5px; float: left; list-style: none; line-height: 30px; text-align: center; }
  4. #ul1 #mark { position: absolute; left: 0; top: 0; overflow: hidden; background: blue; }
  5. #ul1 #mark ul { width: 428px; position: absolute; left: -1px; top: -1px; color: #fff; }
  6. #mark ul li { background: blue; }
  1. window.onload = function(){
  3.     var oMark = document.getElementById('mark');
  4.     var aBox = document.getElementsByClassName('box');
  5.     var childUl = oMark.getElementsByTagName('ul')[0];
  6.     var timer = null;
  7.     var timer2 = null;
  8.     var iSpeed = 0;
  10.     for(var i=0; i<aBox.length; i++){
  11.         aBox[i].onmouseover = function(){
  12.             clearTimeout(timer2);
  13.             startMove(this.offsetLeft);
  14.         }
  15.         aBox[i].onmouseout = function(){
  16.             timer2 = setTimeout(function(){
  17.                 startMove(0);   
  18.             }, 100);
  20.         }
  21.     }
  23.     oMark.onmouseover = function(){
  24.         clearTimeout(timer2);
  25.     }
  26.     oMark.onmouseout = function(){
  27.         timer2 = setTimeout(function(){
  28.             startMove(0);   
  29.         }, 100);
  30.     }
  32.     function startMove(iTarget){
  33.         clearInterval(timer);
  34.         timer = setInterval(function(){
  35.             iSpeed += (iTarget - oMark.offsetLeft) / 6;
  36.             iSpeed *= 0.75;
  37.             if(Math.abs(iSpeed) <= 1 && Math.abs(iTarget - oMark.offsetLeft) <= 1){
  38.                 clearInterval(timer);
  39.                 oMark.style.left = iTarget + 'px';
  40.                 childUl.style.left = -iTarget + 'px';
  41.                 iSpeed = 0;
  42.             } else {
  43.                 oMark.style.left = oMark.offsetLeft + iSpeed + 'px';
  44.                 childUl.style.left = -oMark.offsetLeft + 'px';
  45.             }
  46.         }, 30)
  47.     }
  49. }

弹性过界：

IE老版本下，宽高不能为负数。

  1. <div id="div1"></div>
  1. #div1 { width: 100px; height: 30px; background: red; }
  1. window.onload = function(){
  3.     var oDiv = document.getElementById('div1');
  4.     var timer = null;
  5.     var iSpeed = 0;
  7.     oDiv.onmouseover = function(){
  8.         startMove(300);
  9.     }
  10.     oDiv.onmouseout = function(){
  11.         startMove(30);
  12.     }
  14.     function startMove(iTarget){
  16.         clearInterval(timer);
  17.         timer = setInterval(function(){
  18.             iSpeed += (iTarget - oDiv.offsetHeight) / 6;
  19.             iSpeed *= 0.75;
  21.             if(Math.abs(iSpeed) <= 1 && Math.abs(iTarget - oDiv.offsetHeight) <= 1){
  22.                 clearInterval(timer);
  23.                 iSpeed = 0;
  24.                 oDiv.style.height = iTarget + 'px';
  25.             } else {
  26.                 var H = oDiv.offsetHeight + iSpeed; 
  27.                 if(H < 0) {
  28.                     H = 0;
  29.                 } //解决IE下的弹性过界的问题
  30.                 oDiv.style.height = H + 'px';
  31.             }
  32.         }, 30)
  34.     }
  36. }

弹性运动框架

  1. function startMove(obj,json,fn){
  2.         clearInterval(obj.timer);
  4.         var iSpeed = {};
  5.         for(var attr in json){
  6.                 iSpeed[attr] = 0;
  7.         }
  9.         obj.timer = setInterval(function(){
  11.                 var bBtn = true;
  13.                 for(var attr in json){
  15.                         var iCur = 0;
  16.                         if(attr == 'opacity'){
  17.                                 iCur = Math.round(getStyle(obj,attr)*100);
  18.                         }
  19.                         else{
  20.                                 iCur = parseInt(getStyle(obj,attr));
  21.                         }
  23.                         iSpeed[attr] += (json[attr] - iCur)/6;
  24.                         iSpeed[attr] *= 0.75;
  26.                         if( Math.abs(iSpeed[attr])>1 || Math.abs(json[attr] - iCur)>1 ){
  28.                                 bBtn = false;
  29.                         }
  31.                         var value = iCur + iSpeed[attr];
  33.                         if(value < 0 && (attr == 'width'||attr == 'height')){
  34.                                 value = 0;
  35.                         }
  37.                         if(attr == 'opacity'){
  38.                                 obj.style.filter = 'alpha(opacity='+ value +')';
  39.                                 obj.style.opacity = value/100; 
  40.                         }
  41.                         else{
  42.                                 obj.style[attr] = value + 'px';
  43.                         }
  46.                 }
  48.                 if(bBtn){
  49.                         clearInterval(obj.timer);
  50.                         for(var attr in json){
  51.                                 iSpeed[attr] = 0;
  52.                                 if(attr == 'opacity'){
  53.                                         obj.style.filter = 'alpha(opacity='+ json[attr] +')';
  54.                                         obj.style.opacity = json[attr]/100; 
  55.                                 }
  56.                                 else{
  57.                                         obj.style[attr] = json[attr] + 'px';
  58.                                 }
  59.                         }
  61.                         if(fn){
  62.                                 fn.call(obj);
  63.                         }
  65.                 }
  67.         },30);
  68. }
  71. function getStyle(obj,attr){
  72.         if(obj.currentStyle){
  73.                 return obj.currentStyle[attr];
  74.         }
  75.         else{
  76.                 return getComputedStyle(obj,false)[attr];
  77.         }
  78. }

碰撞运动

无重力匀速碰撞运动

  1. <div id="div1"></div>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; }
  1. window.onload = function(){
  3.     var oDiv = document.getElementById('div1');
  4.     var iSpeedX = 10;
  5.     var iSpeedY = 10;
  7.     startMove();
  8.     function startMove(){
  9.         setInterval(function(){
  10.             var L = oDiv.offsetLeft + iSpeedX;
  11.             var T = oDiv.offsetTop + iSpeedY;
  13.             if(T > document.documentElement.clientHeight - oDiv.offsetHeight){
  14.                 T = document.documentElement.clientHeight - oDiv.offsetHeight;
  15.                 iSpeedY *= -1;
  16.             } else if(T < 0){
  17.                 T = 0;
  18.                 iSpeedY *= -1;
  19.             }
  21.             if(L > document.documentElement.clientWidth - oDiv.offsetWidth){
  22.                 L = document.documentElement.clientWidth - oDiv.offsetWidth;
  23.                 iSpeedX *= -1;
  24.             } else if(L < 0){
  25.                 L = 0;
  26.                 iSpeedX *= -1;
  27.             }
  28.             oDiv.style.left = L + 'px';
  29.             oDiv.style.top = T + 'px';
  30.         }, 30);
  31.     }
  33. }

自由落体加碰撞反弹

  1. <input type="button" value="开始运动" id="input1">
  2. <div id="div1"></div>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; }
  1. window.onload = function(){
  2.     var oInput = document.getElementById('input1');
  3.     var oDiv = document.getElementById('div1');
  4.     var timer = null;
  5.     var iSpeed = 0;
  7.     oInput.onclick = function(){
  8.         startMove();
  9.     }
  11.     function startMove(){
  12.         clearInterval(timer);
  13.         timer = setInterval(function(){
  14.             iSpeed += 3;
  15.             var T = oDiv.offsetTop + iSpeed;
  16.             if(T > document.documentElement.clientHeight - oDiv.offsetHeight){
  17.                 T = document.documentElement.clientHeight - oDiv.offsetHeight;
  18.                 iSpeed *= -1;
  19.                 iSpeed *= 0.75;
  20.             }
  21.             oDiv.style.top = T  + 'px';
  22.         }, 30);
  23.     }
  24. }

抛物线落体

  1. <input type="button" value="开始运动" id="input1">
  2. <div id="div1"></div>
  1. #div1 { width: 100px; height: 100px; background: red; position: absolute; top: 500px; }
  1. window.onload = function(){
  2.     var oInput = document.getElementById('input1');
  3.     var oDiv = document.getElementById('div1');
  4.     var timer = null;
  5.     var iSpeed = -40;
  6.     var iSpeedX = 10;
  8.     oInput.onclick = function(){
  9.         startMove();
  10.     }
  12.     function startMove(){
  13.         clearInterval(timer);
  14.         timer = setInterval(function(){
  15.             iSpeed += 3;
  16.             var T = oDiv.offsetTop + iSpeed;
  17.             if(T > document.documentElement.clientHeight - oDiv.offsetHeight){
  18.                 T = document.documentElement.clientHeight - oDiv.offsetHeight;
  19.                 iSpeed *= -1;
  20.                 iSpeed *= 0.75;
  21.                 iSpeedX *= 0.75;
  22.             }
  23.             oDiv.style.top = T  + 'px';
  24.             oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px';
  25.         }, 30);
  26.     }
  27. }

iphone拖拽效果

  1. <div id="iphone" >
  2.     <div id="wrap">
  3.         <ul id="ul1">
  4.             <li style="background:url(images/pic1.png);" title="妙味课堂"></li>
  5.             <li style="background:url(images/pic2.png);" title="妙味课堂"></li>
  6.             <li style="background:url(images/pic3.png);" title="妙味课堂"></li>
  7.             <li style="background:url(images/pic4.png);" title="妙味课堂"></li>
  8.         </ul>
  9.     </div>
  10. </div>
  1. window.onload = function(){
  2.     var oUl = document.getElementById('ul1');
  3.     var aLi = oUl.getElementsByTagName('li');
  5.     var disX = 0;
  6.     var downX = 0;
  7.     var iNow = 0;
  8.     var timer = null;
  9.     var iSpeed = 0;
  11.     oUl.onmousedown = function(ev){
  12.         var ev = ev || window.event;
  13.         disX = ev.clientX - oUl.offsetLeft;
  14.         downX = ev.clientX;
  16.         clearInterval(timer);
  18.         document.onmousemove = function(ev){
  19.             var ev = ev || window.event;
  20.             oUl.style.left = ev.clientX - disX + 'px';
  21.         };
  22.         document.onmouseup = function(ev){
  23.             document.onmousemove = null;
  24.             document.onmouseup = null;
  25.             var ev = ev || window.event;
  27.             if( ev.clientX < downX ){
  28.                 //alert('←');
  29.                 if( iNow != aLi.length-1 ){
  30.                     iNow++;
  31.                 }
  33.                 startMove( - iNow * aLi[0].offsetWidth  );
  34.             }
  35.             else{
  36.                 //alert('→');
  38.                 if( iNow != 0 ){
  39.                     iNow--;
  40.                 }
  42.                 startMove( - iNow * aLi[0].offsetWidth  );
  44.             }
  46.         };
  47.         return false;
  48.     };
  50.     function startMove(iTarget){
  51.         clearInterval(timer);
  52.         timer = setInterval(function(){
  54.             iSpeed += (iTarget - oUl.offsetLeft)/6;
  55.             iSpeed *= 0.75;
  57.             if( Math.abs(iSpeed)<=1 && Math.abs(iTarget - oUl.offsetLeft)<=1 ){
  58.                 clearInterval(timer);
  59.                 iSpeed = 0;
  60.                 oUl.style.left = iTarget + 'px';
  61.             }
  62.             else{
  63.                 oUl.style.left = oUl.offsetLeft + iSpeed + 'px';
  64.             }
  66.         },30);
  67.     }
  69. };

碰撞弹窗，模仿官网公告菜单实例

  1. <div id="div1"></div>
  1. #div1{ width:100px; height:100px; background:red; position:absolute;}
  1. window.onload = function(){
  2.     var oDiv = document.getElementById('div1');
  4.     var disX = 0;
  5.     var disY = 0;
  7.     var prevX = 0;
  8.     var prevY = 0;
  9.     var iSpeedX = 0;
  10.     var iSpeedY = 0;
  12.     var timer = null;
  14.     oDiv.onmousedown = function(ev){
  15.         var ev = ev || window.event;
  16.         disX = ev.clientX - oDiv.offsetLeft;
  17.         disY = ev.clientY - oDiv.offsetTop;
  19.         prevX = ev.clientX;
  20.         prevY = ev.clientY;
  22.         document.onmousemove = function(ev){
  23.             var ev = ev || window.event;
  24.             oDiv.style.left = ev.clientX - disX + 'px';
  25.             oDiv.style.top = ev.clientY - disY + 'px';
  27.             iSpeedX = ev.clientX - prevX;
  28.             iSpeedY = ev.clientY - prevY;
  30.             prevX = ev.clientX;
  31.             prevY = ev.clientY;
  33.         };
  34.         document.onmouseup = function(){
  35.             document.onmousemove = null;
  36.             document.onmouseup = null;
  38.             startMove();
  40.         };
  41.         return false;
  42.     };
  44.     function startMove(){
  45.         clearInterval(timer);
  46.         timer = setInterval(function(){
  48.             iSpeedY += 3;
  50.             var L = oDiv.offsetLeft + iSpeedX;
  51.             var T = oDiv.offsetTop + iSpeedY;
  53.             if(T>document.documentElement.clientHeight - oDiv.offsetHeight){
  54.                 T = document.documentElement.clientHeight - oDiv.offsetHeight;
  55.                 iSpeedY *= -1;
  56.                 iSpeedY *= 0.75;
  57.                 iSpeedX *= 0.75;
  58.             }
  59.             else if(T<0){
  60.                 T = 0;
  61.                 iSpeedY *= -1;
  62.                 iSpeedY *= 0.75;
  63.             }
  65.             if(L>document.documentElement.clientWidth - oDiv.offsetWidth){
  66.                 L = document.documentElement.clientWidth - oDiv.offsetWidth;
  67.                 iSpeedX *= -1;
  68.                 iSpeedX *= 0.75;
  69.             }
  70.             else if(L<0){
  71.                 L = 0;
  72.                 iSpeedX *= -1;
  73.                 iSpeedX *= 0.75;
  74.             }
  76.             oDiv.style.left = L + 'px';
  77.             oDiv.style.top = T + 'px';
  79.         },30);
  80.     }
  82. };

运动框架（时间版）

JQ的animate

Tween介绍

用原生JS写时间版运动框架

原生JS写运动框架

  1. function startMove(obj, json, time, fx, fn){
  2.     //time: 运动事件 fx: 运动形式
  4.     var iCur = {}; //初始值
  5.     var startTime = now();
  7.     for(var attr in json){
  8.         iCur[attr] = 0; 
  10.         if(attr == 'opacity'){
  11.             iCur[attr] = Math.round(getStyle(obj, attr)*100);
  12.         } else {
  13.             iCur[attr] = parseInt(getStyle(obj, attr));
  14.         }
  15.     }
  17.     clearInterval(obj.timer)
  18.     obj.timer = setInterval(function(){
  19.         var changeTime = now();
  21.         var t = time - Math.max(0, startTime - changeTime + time) //范围：0到time
  23.         for(var attr in json){
  24.             var value = Tween[fx](t, iCur[attr], json[attr] - iCur[attr], time);
  26.             if(attr == 'opacity'){
  27.                 obj.style.oapcity = value / 100;
  28.                 obj.style.filter = 'alpha(opacity=' + value + ')';
  29.             } else {
  30.                 obj.style[attr] = value + 'px';
  31.             }
  32.         }
  34.         if(t == time){
  35.             clearInterval(obj.timer);
  36.             if(fn){
  37.                 fn.call(obj);
  38.             }
  39.         }
  41.     }, 13)
  43.     function getStyle(obj, attr){
  44.         if(obj.currentStyle){
  45.             return obj.currentStyle[attr];
  46.         } else {
  47.             return getComputedStyle(obj, false)[attr];
  48.         }
  49.     }
  51.     function now(){
  52.         return (new Date()).getTime();
  53.     }
  55. }
  57. var Tween = {
  58.     //t: 当前时间 b: 初始值 c: 变化量 d: 持续时间
  59.     //return: 返回的是运动到的目标点
  60.     linear: function (t, b, c, d){  //匀速
  61.         return c*t/d + b;
  62.     },
  63.     easeIn: function(t, b, c, d){  //加速曲线
  64.         return c*(t/=d)*t + b;
  65.     },
  66.     easeOut: function(t, b, c, d){  //减速曲线
  67.         return -c *(t/=d)*(t-2) + b;
  68.     },
  69.     easeBoth: function(t, b, c, d){  //加速减速曲线
  70.         if ((t/=d/2) < 1) {
  71.             return c/2*t*t + b;
  72.         }
  73.         return -c/2 * ((--t)*(t-2) - 1) + b;
  74.     },
  75.     easeInStrong: function(t, b, c, d){  //加加速曲线
  76.         return c*(t/=d)*t*t*t + b;
  77.     },
  78.     easeOutStrong: function(t, b, c, d){  //减减速曲线
  79.         return -c * ((t=t/d-1)*t*t*t - 1) + b;
  80.     },
  81.     easeBothStrong: function(t, b, c, d){  //加加速减减速曲线
  82.         if ((t/=d/2) < 1) {
  83.             return c/2*t*t*t*t + b;
  84.         }
  85.         return -c/2 * ((t-=2)*t*t*t - 2) + b;
  86.     },
  87.     elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线（弹动渐入）
  88.         if (t === 0) { 
  89.             return b; 
  90.         }
  91.         if ( (t /= d) == 1 ) {
  92.             return b+c; 
  93.         }
  94.         if (!p) {
  95.             p=d*0.3; 
  96.         }
  97.         if (!a || a < Math.abs(c)) {
  98.             a = c; 
  99.             var s = p/4;
  100.         } else {
  101.             var s = p/(2*Math.PI) * Math.asin (c/a);
  102.         }
  103.         return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  104.     },
  105.     elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线（弹动渐出）
  106.         if (t === 0) {
  107.             return b;
  108.         }
  109.         if ( (t /= d) == 1 ) {
  110.             return b+c;
  111.         }
  112.         if (!p) {
  113.             p=d*0.3;
  114.         }
  115.         if (!a || a < Math.abs(c)) {
  116.             a = c;
  117.             var s = p / 4;
  118.         } else {
  119.             var s = p/(2*Math.PI) * Math.asin (c/a);
  120.         }
  121.         return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
  122.     },    
  123.     elasticBoth: function(t, b, c, d, a, p){
  124.         if (t === 0) {
  125.             return b;
  126.         }
  127.         if ( (t /= d/2) == 2 ) {
  128.             return b+c;
  129.         }
  130.         if (!p) {
  131.             p = d*(0.3*1.5);
  132.         }
  133.         if ( !a || a < Math.abs(c) ) {
  134.             a = c; 
  135.             var s = p/4;
  136.         }
  137.         else {
  138.             var s = p/(2*Math.PI) * Math.asin (c/a);
  139.         }
  140.         if (t < 1) {
  141.             return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
  142.                     Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  143.         }
  144.         return a*Math.pow(2,-10*(t-=1)) * 
  145.                 Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
  146.     },
  147.     backIn: function(t, b, c, d, s){     //回退加速（回退渐入）
  148.         if (typeof s == 'undefined') {
  149.            s = 1.70158;
  150.         }
  151.         return c*(t/=d)*t*((s+1)*t - s) + b;
  152.     },
  153.     backOut: function(t, b, c, d, s){
  154.         if (typeof s == 'undefined') {
  155.             s = 3.70158;  //回缩的距离
  156.         }
  157.         return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
  158.     }, 
  159.     backBoth: function(t, b, c, d, s){
  160.         if (typeof s == 'undefined') {
  161.             s = 1.70158; 
  162.         }
  163.         if ((t /= d/2 ) < 1) {
  164.             return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  165.         }
  166.         return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
  167.     },
  168.     bounceIn: function(t, b, c, d){    //弹球减振（弹球渐出）
  169.         return c - Tween['bounceOut'](d-t, 0, c, d) + b;
  170.     },       
  171.     bounceOut: function(t, b, c, d){
  172.         if ((t/=d) < (1/2.75)) {
  173.             return c*(7.5625*t*t) + b;
  174.         } else if (t < (2/2.75)) {
  175.             return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
  176.         } else if (t < (2.5/2.75)) {
  177.             return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
  178.         }
  179.         return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
  180.     },      
  181.     bounceBoth: function(t, b, c, d){
  182.         if (t < d/2) {
  183.             return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
  184.         }
  185.         return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
  186.     }
  187. }

解决定时器缓慢的问题的方法

  1. window.onfocus = function(){ //当页面切换回来之后再把定时器打开
  2.     console.log(1);
  3.     timer = setInterval(toRun, 2000);
  4. }
  5. window.onblur = function(){ //当切换页面的时候把定时器关上
  6.     console.log(2);
  7.     clearInterval(timer);
  8. }
  10. //timer = setInterval(toRun, 2000);

扩展JQ的运动形式

  1. $.extend(jQuery.easing, {
  3.     //以下为Tween中的公式 为了匹配jQuery，添加了一个不用的参数x
  4.     easeIn: function(x, t, b, c, d){  //加速曲线
  5.         return c*(t/=d)*t + b;
  6.     },
  7.     easeOut: function(x, t, b, c, d){  //减速曲线
  8.         return -c *(t/=d)*(t-2) + b;
  9.     },
  10.     easeBoth: function(x, t, b, c, d){  //加速减速曲线
  11.         if ((t/=d/2) < 1) {
  12.             return c/2*t*t + b;
  13.         }
  14.         return -c/2 * ((--t)*(t-2) - 1) + b;
  15.     },
  16.     easeInStrong: function(x, t, b, c, d){  //加加速曲线
  17.         return c*(t/=d)*t*t*t + b;
  18.     },
  19.     easeOutStrong: function(x, t, b, c, d){  //减减速曲线
  20.         return -c * ((t=t/d-1)*t*t*t - 1) + b;
  21.     },
  22.     easeBothStrong: function(x, t, b, c, d){  //加加速减减速曲线
  23.         if ((t/=d/2) < 1) {
  24.             return c/2*t*t*t*t + b;
  25.         }
  26.         return -c/2 * ((t-=2)*t*t*t - 2) + b;
  27.     },
  28.     elasticIn: function(x, t, b, c, d, a, p){  //正弦衰减曲线（弹动渐入） //a和p与运动幅度有关，可以不写，因为有默认值
  29.         if (t === 0) { 
  30.             return b; 
  31.         }
  32.         if ( (t /= d) == 1 ) {
  33.             return b+c; 
  34.         }
  35.         if (!p) {
  36.             p=d*0.3; 
  37.         }
  38.         if (!a || a < Math.abs(c)) {
  39.             a = c; 
  40.             var s = p/4;
  41.         } else {
  42.             var s = p/(2*Math.PI) * Math.asin (c/a);
  43.         }
  44.         return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  45.     },
  46.     elasticOut: function(x, t, b, c, d, a, p){    //正弦增强曲线（弹动渐出）
  47.         if (t === 0) {
  48.             return b;
  49.         }
  50.         if ( (t /= d) == 1 ) {
  51.             return b+c;
  52.         }
  53.         if (!p) {
  54.             p=d*0.3;
  55.         }
  56.         if (!a || a < Math.abs(c)) {
  57.             a = c;
  58.             var s = p / 4;
  59.         } else {
  60.             var s = p/(2*Math.PI) * Math.asin (c/a);
  61.         }
  62.         return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
  63.     },    
  64.     elasticBoth: function(x, t, b, c, d, a, p){
  65.         if (t === 0) {
  66.             return b;
  67.         }
  68.         if ( (t /= d/2) == 2 ) {
  69.             return b+c;
  70.         }
  71.         if (!p) {
  72.             p = d*(0.3*1.5);
  73.         }
  74.         if ( !a || a < Math.abs(c) ) {
  75.             a = c; 
  76.             var s = p/4;
  77.         }
  78.         else {
  79.             var s = p/(2*Math.PI) * Math.asin (c/a);
  80.         }
  81.         if (t < 1) {
  82.             return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
  83.                     Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  84.         }
  85.         return a*Math.pow(2,-10*(t-=1)) * 
  86.                 Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
  87.     },
  88.     backIn: function(x, t, b, c, d, s){     //回退加速（回退渐入）
  89.         if (typeof s == 'undefined') {
  90.            s = 1.70158;
  91.         }
  92.         return c*(t/=d)*t*((s+1)*t - s) + b;
  93.     },
  94.     backOut: function(x, t, b, c, d, s){
  95.         if (typeof s == 'undefined') {
  96.             s = 3.70158;  //回缩的距离
  97.         }
  98.         return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
  99.     }, 
  100.     backBoth: function(x, t, b, c, d, s){
  101.         if (typeof s == 'undefined') {
  102.             s = 1.70158; 
  103.         }
  104.         if ((t /= d/2 ) < 1) {
  105.             return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  106.         }
  107.         return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
  108.     },
  109.     bounceIn: function(x, t, b, c, d){    //弹球减振（弹球渐出）
  110.         return c - this['bounceOut'](x, d-t, 0, c, d) + b;
  111.     },       
  112.     bounceOut: function(x, t, b, c, d){
  113.         if ((t/=d) < (1/2.75)) {
  114.             return c*(7.5625*t*t) + b;
  115.         } else if (t < (2/2.75)) {
  116.             return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
  117.         } else if (t < (2.5/2.75)) {
  118.             return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
  119.         }
  120.         return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
  121.     },      
  122.     bounceBoth: function(x, t, b, c, d){
  123.         if (t < d/2) {
  124.             return this['bounceIn'](x, t*2, 0, c, d) * 0.5 + b;
  125.         }
  126.         return this['bounceOut'](x, t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
  127.     }
  128. });
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注