简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >第七章 JavaScript动画

第七章 JavaScript动画

刘静的博客
刘静的博客原创
2020年08月25日 11:39:13647浏览

第七章 JavaScript动画

简单运动

如何让物体运动起来

css代码如下：

  1. <style type="text/css">
  2.     *{
  3.         padding: 0;
  4.         margin: 0;
  5.     }
  6.     button{
  7.         width: 80px;
  8.         height: 40px;
  9.     }
  10.     #box{
  11.         width: 200px;
  12.         height: 200px;
  13.         background-color: pink;
  14.         position: absolute;
  15.         top: 50px;
  16.     }
  17. </style>

html代码：

  1. <button id="btn">动画</button>
  2. <div id="box"></div>

javascript代码：

  1. <script type="text/javascript">
  2.     // 简单的动画存在的问题: 1.处理边界  2.定时器的管理
  4.     // 1.获取事件源
  5.     var btn = document.getElementById('btn');
  6.     var box = document.getElementById('box');
  7.     var timer = null;
  8.     // 2.给按钮绑定事件
  9.     btn.onclick = function (){
  10.         // 先关闭定时器 再开启定时器 防止定时器累加 导致物体加快
  11.         clearInterval(timer);
  12.         // 3.让物体运动起来(定时器)   如果没有边界，速度会越来越快
  13.         timer = setInterval(function (){
  14.             if(box.offsetLeft === 500){
  15.                 clearInterval(timer);
  16.             }else{
  17.                 box.style.left = box.offsetLeft + 10 + 'px';
  18.             }
  19.         },30);
  21.     }
  22. </script>

侧边栏动画效果

css代码如下：

  1. <style type="text/css">
  2.     *{margin:0px;padding:0px;}
  3.     #box{width:200px;height:200px;background-color:red;position:relative;margin-top:20px;left:-200px;}
  4.     span{width: 40px;height: 60px;background-color:     pink;color:#fff;position:absolute;right:-40px;top:50%;margin-top:-30px;text-align:center;line-                      height:60px;border-top-right-radius:10px;border-bottom-right-radius:10px;}
  5. </style>

html代码：

  1. <div id="box">
  2.     <span>拉开</span>
  3. </div>

javascript代码：

  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.         var box = document.getElementById('box');
  4.         var sp = document.getElementsByTagName('span');
  5.         box.onmouseover = function(){
  6.             this.style.left = 0 + 'px';
  7.         }
  8.         box.onmouseout = function (){
  9.             this.style.left = -box.offsetWidth + 'px';
  10.             // this.style.left = -200 + 'px';
  11.         }    
  12.     }
  13. </script>

[^注意：如果offsetWidth的对象有padding或者border值那么获取的obj.offsetWidth与定义的width不一致]:

侧边栏动画效果(匀速运动)

css代码如下：

  1. <style type="text/css">
  2.     *{
  3.         padding: 0;
  4.         margin: 0;
  5.     }
  6.     #box{
  7.         width: 200px;
  8.         height: 200px;
  9.         background-color: red;
  10.         position: relative;
  11.         left: -200px;
  12.     }
  13.     #box span{
  14.         position: absolute;
  15.         width: 40px;
  16.         height: 60px;
  17.         color: #fff;
  18.         background-color: #000000;
  19.         right: -40px;
  20.         top: 50%;
  21.         margin-top: -30px;
  22.         line-height: 60px;
  23.         text-align: center;
  24.     }
  25. </style>

html代码如下：

  1. <div id="box">
  2.     <span>拉开</span>
  3. </div>

javascript代码如下：

  1. <script type="text/javascript">
  2.     window.onload = function (){
  3.     var box = document.getElementById('box');
  4.     var timer = null;
  5.     box.onmouseover = function(){
  6.         //先关闭定时器
  7.         clearInterval(timer);
  8.         timer = setInterval(function(){
  9.             if(box.offsetLeft === 0){
  10.                 clearInterval(timer);
  11.                 return;
  12.             }else{
  13.                 box.style.left = box.offsetLeft + 5 +'px';
  14.             }                    
  15.          },100)
  16.       }            
  17.       box.onmouseout = function(){
  18.           clearInterval(timer);
  19.           timer = setInterval(function(){
  20.               if(box.offsetLeft === -200){
  21.                       clearInterval(timer);
  22.                       return;
  23.                   }else{
  24.                       box.style.left = box.offsetLeft  -5 +'px';
  25.                   }
  26.               })
  27.            }
  28.        }    
  29. </script>

侧边栏封装

javascript代码：

  1. <script type="text/javascript">
  2.     window.onload = function (){
  3.         var box = document.getElementById('box');
  4.         var timer = null,speed = 0;
  5.         box.onmouseover = function(){
  6.             //先关闭定时器
  7.             startAnimation(this,0);
  8.         }
  9.         box.onmouseout = function(){
  10.             startAnimation(this,-200);
  11.         }
  13.         function startAnimation(obj,end){
  14.             clearInterval(timer);
  15.             speed = end > obj.offsetLeft ? 5 : -5;
  16.             timer = setInterval(function(){
  17.                 if(obj.offsetLeft === end){
  18.                     clearInterval(timer);
  19.                     return;
  20.                 }else{
  21.                     obj.style.left = obj.offsetLeft + speed +'px';
  22.                 }
  23.             })        
  24.          }    
  25.      }
  26. </script>

缓动运动

javascript代码：

  1. <script type="text/javascript">
  2.     //0 —— 200
  3.     //缓慢运动公式：加速度 = (结束值 - 起始值)/时间(缓动系数) 加速度是由快到慢
  4.     window.onload = function (){
  5.         var box = document.getElementById('box');
  6.         var timer = null;end = 0;end2 = -200;
  7.         box.onmouseover = function(){
  8.             clearInterval(timer);
  9.             timer = setInterval(function(){
  10.                 speed = Math.ceil((end - box.offsetLeft)/20);//0.45 数学Math.ceil()向上取整
  11.                 //处理边界问题
  12.                 if(box.offsetLeft === end){
  13.                     clearInterval(timer);
  14.                     return;
  15.                 }else{
  16.                     // console.log(box.offsetLeft,speed);//-9 0.45
  17.                     box.style.left = box.offsetLeft + speed +'px';//left: -8.55px;
  18.                 }                
  19.                 },30);
  20.         }                                
  21.         box.onmouseout = function(){
  22.             clearInterval(timer);
  23.             timer = setInterval(function(){
  24.                 speed = Math.floor((end2 - box.offsetLeft)/20);//0.45 数学Math.ceil()向上取整
  25.                 //处理边界问题
  26.                 if(box.offsetLeft === end2){
  27.                     clearInterval(timer);
  28.                     return;
  29.                 }else{
  30.                     console.log(box.offsetLeft,speed);//-199 -1
  31.                     box.style.left = box.offsetLeft + speed +'px';//left: -8.55px;
  32.                 }                
  33.             },30);
  34.         }    
  35.     }
  36. </script>

缓动运动封装

javascript代码：

  1. <script type="text/javascript">
  2.     //缓慢运动公式：加速度 = (结束值 - 起始值)/时间(缓动系数) 加速度是由快到慢
  3.     window.onload = function (){
  4.         var box = document.getElementById('box');
  5.         var timer = null;
  6.         box.onmouseover = function(){            
  7.                slowAnimation(this,0);
  8.         }
  10.         box.onmouseout = function(){
  11.             slowAnimation(this,-200);
  12.         }
  14.         function slowAnimation(obj,end){
  15.             clearInterval(timer);
  16.             timer = setInterval(function(){
  17.                 speed = (end - obj.offsetLeft) / 20;
  18.                 //如果速度大于0，证明物体往右走，速度小于0，证明物体往左走
  19.                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  20.                 //处理边界问题
  21.                 if(obj.offsetLeft === end){
  22.                     clearInterval();
  23.                     return;
  24.                 }else{
  25.                     //console.log(obj.offsetLeft,speed)
  26.                     obj.style.left = obj.offsetLeft + speed + 'px';
  27.                 }
  28.             },30)
  29.         }
  30.     }    
  31. </script>

透明度动画

css代码：

  1. <style type="text/css">
  2.     #box{
  3.         width:200px;
  4.         height:200px;
  5.         background-color:pink;
  6.         opacity:0.3;//全浏览器支持
  7.         filter:alpha(opacity:30);
  8.         //支持ie8以下浏览器  filter:alpha(opacity:30)
  9.     }
  10. </style>

javascript代码：

  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.         //1.获取事件源
  4.         var box = document.getElementById('box');
  5.         //2.监听事件
  6.         box.onmouseover = function(){
  7.             opacityAnimation(this,100);
  8.         }
  9.         box.onmouseout = function(){
  10.             opacityAnimation(this,30);
  11.         }
  12.         var timer = null;alpha = 30;speed = 0;
  13.         function opacityAnimation(obj,endAlpha){
  14.             clearInterval(timer);
  15.             timer = setInterval(function(){
  16.                 //求透明度变化的速度
  17.                 speed = endAlpha > alpha ? 1 :-1;
  18.                 //边界处理
  19.                 if(alpha === endAlpha){
  20.                     clearInterval(timer);
  21.                     return;
  22.                 }
  23.                 alpha += speed;
  24.                 obj.style.opacity = alpha/100;
  25.                 obj.style.filter = `alpha(opacity:${alpha})`;
  26.             },30)
  27.         }
  28.     }
  29. </script>

多物体缓动运动

css代码：

  1. <style type="text/css">
  2.     *{
  3.         padding:0px;
  4.         margin:0px;
  5.     }
  6.     div{
  7.         width:300px;
  8.         height:150px;
  9.         background-color:#3081BF;
  10.         margin:20px 0px;
  11.     }
  12. </style>

html代码：

  1. <div></div>
  2. <div></div>
  3. <div></div>

javascript代码

  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.         var allBoxs = document.getElementsByTagName('div');
  4.         for(var i = 0;i<allBoxs.length;i++){
  5.             allBoxs[i].onmouseover = function(){
  6.                 startAnimation(this,600);
  7.             }
  8.             allBoxs[i].onmouseout = function(){
  9.                 startAnimation(this,300);
  10.             }
  11.          }
  13.         var timer = null,speed = 0;
  14.         function startAnimation(obj,endTarget){
  15.             //针对于多物体运动，定时器的返回值要绑定在当前的对象上
  16.             clearInterval(obj.timer);
  17.             obj.timer = setInterval(function(){
  18.                 //1.求速度
  19.                 speed = (endTarget - obj.offsetWidth) / 10;
  20.                 speed = endTarget > obj.offsetWidth ? Math.ceil(speed) : Math.floor(speed);
  21.                 //2.设置临界值
  22.                 if(endTarget === obj.offsetWidth){
  23.                     clearInterval(obj.timer);
  24.                     return;
  25.                 }
  26.                 //3.运动
  27.                 obj.style.width = obj.offsetWidth + speed +'px';
  28.             },30)
  29.         }
  30.     }
  31. </script>

[^针对于多物体运动，定时器的返回值要绑定在当前的对象上]:

正确获取元素样式属性

css代码

  1. <style type="text/css">
  2.     #box{
  3.         width:200px;
  4.         height:200px;
  5.         background-color:red;
  6.         border:1px solid #000;
  7.     }
  8. </style>

javascript代码

  1. <script type="text/javascript">
  2.         window.onload = function(){
  3.             var box = document.getElementById('box');
  4.             move(box);
  5.             function move(obj){
  6.                 setInterval(function(){
  7.                     // alert(obj.offsetWidth);   obj.style.width为获取行内宽度
  8.                     obj.style.width = parseInt(getStyle(obj,'width')) - 1 + 'px';
  9.                     // console.log(getStyle(obj,'width'));//string类型
  10.                 },30);
  11.             }
  12.             //获取元素属性的函数
  13.             // @param {object} obj当前元素对象
  14.             // @param {object} attr 当前元素对象的属性
  15.             function getStyle(obj,attr){
  16.                 if(obj.currentStyle){
  17.                     //判断是否在ie浏览器上  ie11
  18.                     return obj.currentStyle[attr];
  19.                 }else{
  20.                     //兼容主流浏览器  ie11也不支持
  21.                     return getComputedStyle(obj,null)[attr];
  22.                 }    
  23.             }
  24.         }
  25. </script>

[^obj.currentStyle[attr]：获取ie浏览器上的的样式属性，包括ie11]:

多物体缓动运动完整版

css代码

  1. <style type="text/css">
  2.     *{
  3.         padding:0px;
  4.         margin:0px;
  5.     }
  6.     div{
  7.         width:300px;
  8.         height:150px;
  9.         background-color:red;
  10.         margin:20px 0px;
  11.         border:4px solid #000;
  12.     }
  13. </style>

html代码

  1. <div></div>
  2. <div></div>
  3. <div></div>

javascript代码

  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.         var boxs = document.getElementsByTagName('div');
  4.         for(var i = 0;i<boxs.length;i++){
  5.             boxs[i].onmouseover = function(){
  6.                 startAnimation(this,600);
  7.             }
  8.             boxs[i].onmouseout = function(){
  9.                 startAnimation(this,300);
  10.             }
  11.         }
  12.         var speed = 0,timer = null;
  13.         function startAnimation(obj,endTarget){
  14.             clearInterval(obj.timer);
  15.             obj.timer = setInterval(function(){
  16.                 //0.获取样式属性
  17.                 var cur = parseInt(getStyle(obj,'width'));//string
  18.                 // 1.求速度
  19.                 speed = (endTarget - cur) / 20;
  20.                 speed = (endTarget > cur) ? Math.ceil(speed) : Math.floor(speed);
  21.                 //2.临界处理
  22.                 if(endTarget === cur){
  23.                     clearInterval(obj.timer);    
  24.                     return;
  25.                  }
  26.                 //3.运动起来
  27.                 obj.style.width = cur + speed + 'px';
  28.             },30)
  29.         }
  31.         //获取元素属性的函数
  32.         // @param {object} obj当前元素对象
  33.         // @param {object} attr 当前元素对象的属性
  34.         function getStyle(obj,attr){
  35.             if(obj.currentStyle){
  36.                 //判断是否在ie浏览器上  ie11
  37.                 return obj.currentStyle[attr];
  38.             }else{
  39.                 //兼容主流浏览器  ie11也不支持
  40.                 return getComputedStyle(obj,null)[attr];
  41.             }    
  42.         }
  43.     }
  44. </script>

多值运动

javascript代码

  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.         var boxs = document.getElementsByTagName('div');
  4.         // for(var i = 0;i<boxs.length;i++){
  5.         //     boxs[i].onmouseover = function(){
  6.         //         startAnimation(this,600);
  7.         //     }
  8.         //     boxs[i].onmouseout = function(){
  9.         //         startAnimation(this,300);
  10.         //     }
  11.         // }
  12.         boxs[0].onmouseover = function(){
  13.             startAnimation(this,'width',600);
  14.         }
  15.         boxs[0].onmouseout = function(){
  16.             startAnimation(this,'width',300);
  17.         }
  18.         boxs[1].onmouseover = function(){
  19.             startAnimation(this,'height',300);
  20.         }
  21.         boxs[1].onmouseout = function(){
  22.             startAnimation(this,'height',150);
  23.         }
  24.         boxs[2].onmouseover = function(){
  25.             startAnimation(this,'width',600);
  26.         }
  27.         boxs[2].onmouseout = function(){
  28.             startAnimation(this,'width',300);
  29.         }
  32.         var speed = 0,timer = null;
  33.         function startAnimation(obj,attr,endTarget){
  34.             clearInterval(obj.timer);
  35.             obj.timer = setInterval(function(){
  36.                 //0.获取样式属性
  37.                 var cur = parseInt(getStyle(obj,attr));//string
  38.                 // 1.求速度
  39.                 speed = (endTarget - cur) / 20;
  40.                 speed = (endTarget > cur) ? Math.ceil(speed) : Math.floor(speed);
  41.                 //2.临界处理
  42.                 if(endTarget === cur){
  43.                     clearInterval(obj.timer);
  44.                     return;
  45.                 }
  46.                 //3.运动起来
  47.                 //obj.style.width = cur + speed + 'px';
  48.                 obj.style[attr] = cur + speed + 'px';
  49.             },30)
  50.         }
  52.         //获取元素属性的函数
  53.         // @param {object} obj当前元素对象
  54.         // @param {object} attr 当前元素对象的属性
  55.         function getStyle(obj,attr){
  56.             if(obj.currentStyle){
  57.                 //判断是否在ie浏览器上  ie11
  58.                 return obj.currentStyle[attr];
  59.             }else{
  60.                 //兼容主流浏览器  ie11也不支持
  61.                 return getComputedStyle(obj,null)[attr];
  62.             }    
  63.         }
  64.     }
  65. </script>

多值运动-处理透明度

css代码如下

  1. <style type="text/css">
  2.     *{
  3.         padding:0px;
  4.         margin:0px;
  5.     }
  6.     div{
  7.         width:300px;
  8.         height:150px;
  9.         background-color:pink;
  10.         margin:20px 0px;
  11.         border:4px solid #000;
  12.         opacity:0.3;
  13.         filter:alpha(opacity:30);
  14.     }
  15. </style>

javascript代码如下

  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.         var boxs = document.getElementsByTagName('div');
  4.         boxs[0].onmouseover = function(){
  5.             startAnimation(this,'opacity',100);
  6.         }
  7.         boxs[0].onmouseout = function(){
  8.             startAnimation(this,'opacity',30);
  9.         }
  10.         boxs[1].onmouseover = function(){
  11.             startAnimation(this,'height',300);
  12.         }
  13.         boxs[1].onmouseout = function(){
  14.             startAnimation(this,'height',150);
  15.         }
  16.         boxs[2].onmouseover = function(){
  17.             startAnimation(this,'width',600);
  18.         }
  19.         boxs[2].onmouseout = function(){
  20.             startAnimation(this,'width',300);
  21.         }
  23.         var speed = 0,timer = null;
  24.             // alert(Math.round(0.07*100));//四舍五入一下
  25.         function startAnimation(obj,attr,endTarget){
  26.             clearInterval(obj.timer);
  27.             obj.timer = setInterval(function(){
  28.                 var cur =  0;
  29.                 //透明度变化处理
  30.                 //0.获取样式属性
  31.                 if(attr === 'opacity'){
  32.                     cur = Math.round(parseFloat(getStyle(obj,attr))*100);//正常的四色五入
  33.                 }else{
  34.                     cur = parseInt(getStyle(obj,attr));
  35.                 }
  38.                 // console.log(typeof getStyle(obj,attr));//string
  39.                 // 1.求速度
  40.                 speed = (endTarget - cur) / 20;
  41.                 speed = (endTarget > cur) ? Math.ceil(speed) : Math.floor(speed);
  42.                 //2.临界处理
  43.                 if(endTarget === cur){
  44.                     clearInterval(obj.timer);
  45.                     return;
  46.                 }
  47.                 //3.运动起来
  48.                 //obj.style.width = cur + speed + 'px';
  49.                 if(attr === 'opacity'){
  50.                     obj.style[attr] = `alpha(opacity:${cur+speed})`;
  51.                     obj.style[attr] = (cur + speed)/100;
  52.                 }else{
  53.                     obj.style[attr] = cur + speed + 'px';
  54.                 }
  55.             },30)
  56.          }
  59.         //获取元素属性的函数
  60.         // @param {object} obj当前元素对象
  61.         // @param {object} attr 当前元素对象的属性
  62.         function getStyle(obj,attr){
  63.             if(obj.currentStyle){
  64.                 //判断是否在ie浏览器上  ie11
  65.                 return obj.currentStyle[attr];
  66.             }else{
  67.                 //兼容主流浏览器  ie11也不支持
  68.                 return getComputedStyle(obj,null)[attr];
  69.             }    
  70.         }
  71.     }
  72.     </script>

链式运动

javascript代码

  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.             var box = document.getElementById('box');
  5.             box.onmouseover = function(){
  6.                 startAnimation(box,'width',500,function(){
  7.                     startAnimation(box,'height',400);
  8.                 });
  9.             }
  10.             box.onmouseout = function(){
  11.                 startAnimation(this,'width',300,function(){
  12.                     startAnimation(box,'height',150);
  13.                 });
  14.             }
  15.         }
  16. </script>

myAnimation3.js代码

  1. var speed = 0,timer = null;
  2. // 动画函数
  3. // @param {object} obj 当前的对象
  4. // @param {object} attr 当前元素对象的属性
  5. // @param {object} endTarget 末尾位置
  7. // alert(Math.round(0.07*100));//四舍五入一下
  8. function startAnimation(obj,attr,endTarget,fn){
  9.     //针对于多物体的运动，定时器的返回值要绑定到当前的对象中
  10.     clearInterval(obj.timer);
  11.     obj.timer = setInterval(function(){
  12.         var cur =  0;
  13.         //透明度变化处理
  14.         //0.获取样式属性
  15.         if(attr === 'opacity'){
  16.             cur = Math.round(parseFloat(getStyle(obj,attr))*100);
  17.         }else{
  18.             cur = parseInt(getStyle(obj,attr));
  19.         }
  20.         // 1.求速度
  21.             speed = (endTarget - cur) / 20;
  22.             speed = (endTarget > cur) ? Math.ceil(speed) : Math.floor(speed);
  23.         //2.临界处理
  24.         if(endTarget === cur){
  25.             clearInterval(obj.timer);
  26.             if(fn){
  27.                 fn();
  28.             }
  29.             return;
  30.         }
  31.         //3.运动起来
  32.         //obj.style.width = cur + speed + 'px';
  33.         if(attr === 'opacity'){
  34.             obj.style[attr] = `alpha(opacity:${cur+speed})`;
  35.             obj.style[attr] = (cur + speed)/100;
  36.         }else{
  37.             obj.style[attr] = cur + speed + 'px';
  38.         }
  39.     },30)
  40. }
  43. //获取元素属性的函数
  44. // @param {object} obj当前元素对象
  45. // @param {object} attr 当前元素对象的属性
  46. function getStyle(obj,attr){
  47.     if(obj.currentStyle){
  48.         //判断是否在ie浏览器上  ie11
  49.         return obj.currentStyle[attr];
  50.     }else{
  51.         //兼容主流浏览器  ie11也不支持
  52.         return getComputedStyle(obj,null)[attr];
  53.     }    
  54. }

同时运动

javascript代码

  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.         var box = document.getElementById('box');
  4.         // json文件里面没有函数
  5.         box.onmouseover = function(){
  6.             startAnimation(box,{"width":500,"opacity":30});
  7.         }
  8.     }
  9. </script>

myAnimation4.js代码

  1. var speed = 0,timer = null;
  2. // 动画函数
  3. // @param {object} obj 当前的对象
  4. // @param {object} attr 当前元素对象的属性
  5. // @param {object} endTarget 末尾位置
  7. // alert(Math.round(0.07*100));//四舍五入一下
  8. function startAnimation(obj,json,fn){
  9.     //针对于多物体的运动，定时器的返回值要绑定到当前的对象中
  10.     clearInterval(obj.timer);
  11.     obj.timer = setInterval(function(){
  12.         var cur =  0;
  13.         var flag = true;//标杆 如果为true，证明所有属性都达到终点值
  14.         for(var attr in json){
  15.             switch(attr){
  16.                 case 'opacity':
  17.                     cur = Math.round(parseFloat(getStyle(obj,attr))*100);
  18.                     break;
  19.                 case 'scrollTop':
  20.                     cur = obj[attr];//cur = obj.scrollTop
  21.                     break;
  22.                 default:
  23.                     cur = parseInt(getStyle(obj,attr));
  24.                     break;
  25.             }
  26.             // 1.求速度
  27.                 speed = (json[attr] - cur) / 20;
  28.                 speed = (json[attr] > cur) ? Math.ceil(speed) : Math.floor(speed);
  29.             //2.临界处理
  30.             if(json[attr] !== cur){
  31.                 flag = false;
  32.             }
  33.             //3.运动起来
  34.             switch(attr){
  35.                 case 'opacity':
  36.                     obj.style[attr] = `alpha(opacity:${cur+speed})`;
  37.                     obj.style[attr] = (cur + speed)/100;
  38.                     break;
  39.                 case 'scrollTop':
  40.                     obj.scrollTop = cur + speed;
  41.                     break;
  42.                 default:
  43.                     obj.style[attr] = cur + speed + 'px';
  44.                     break;
  45.             }
  47.             if(flag){
  48.                 clearInterval(obj.timer);
  49.                 if(fn){
  50.                     fn();
  51.                 }
  52.                 return;
  53.             }
  55.         }    
  56.     },30)
  57. }
  59. //获取元素属性的函数
  60. // @param {object} obj当前元素对象
  61. // @param {object} attr 当前元素对象的属性
  62. function getStyle(obj,attr){
  63.     if(obj.currentStyle){
  64.         //判断是否在ie浏览器上  ie11
  65.         return obj.currentStyle[attr];
  66.     }else{
  67.         //兼容主流浏览器  ie11也不支持
  68.         return getComputedStyle(obj,null)[attr];
  69.     }    
  70. }

完美动画框架

javascript代码

  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.         var box = document.getElementById('box');
  4.         // json文件里面没有函数
  5.         box.onmouseover = function(){
  6.             startAnimation(box,{"width":500,"opacity":30});
  7.         }
  8.         box.onmouseout = function(){
  9.             startAnimation(box,{"width":200,"opacity":100});
  10.         }
  11.     }
  12. </script>

联动效果

css代码(380*380)

  1. <style type="text/css">
  2.     *{padding:0px;margin:0px;}
  3.     #ad{position:fixed;float:left;right:0px;bottom:0px;}
  4.     #close{position:absolute;right:0px;top:0px;width:25px;height:25px;z-index:10;}
  5. </style>

html代码

  1. <div id="ad">
  2.     <img src="images/ad.png" width="300">
  3.     <span id="close"></span>
  4. </div>

javascript代码(myAnimation4.js)

  1. <script type="text/javascript">
  2.     var ad = document.getElementById('ad');
  3.     var close = document.getElementById('close');
  4.     close.onclick = function(){
  5.         startAnimation(ad,{"height":260},function(){
  6.             startAnimation(ad,{"width":0},function(){
  7.                 ad.style.display = 'none';
  8.             })
  9.         })
  10.     }
  11. </script>

侧边栏横幅效果

css代码

  1. <style type="text/css">
  2.     *{padding:0px;margin:0px;}
  3.     #aside{position:absolute;top:200px;left:0px;width:300px;}
  4.     #aside img{width:100%;}
  5. </style>

html代码

  1. <body style="height:5000px;">
  2.     <div id="aside">
  3.         <img src="images/aside.png">
  4.     </div>
  5. </body>

javascript代码()

  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.         //1.获取标签
  4.         var aside = document.getElementById('aside');
  5.         var aside_top = aside.offsetTop;
  6.         window.onscroll = function(){
  7.             //3.获取页面滚动的高度
  8.             var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  9.             startAnimation(aside,{"top":docScrollTop + aside_top});
  10.         }
  11.     }
  12. </script>

[^document.documentElement.scrollTop:chrome浏览器，火狐浏览器可以，sarfi不行]:
[^document.body.scrollTop：chrome浏览器不行，火狐浏览器可以，sarfi可以]:

滚动监听特效结构和样式实现

css代码

  1. <style type="text/css">
  2.     *{margin:0px;padding:0px;}
  3.     ul{list-style:none;}
  4.     a{text-decoration:none;}
  5.     html,body{width:100%;height:100%;}
  6.     .container{width:1190px;height:100%;margin:0px auto;}
  7.     .container div{width:100%;height:100%;text-align:center;color:#fff;font-size:30px;}
  8.     .aside{position:fixed;width:40px;right:20px;top:300px;font-size:16px;font-weight:700;text-align:center;}
  9.     .aside li{height:50px;border-bottom:1px solid #ddd;}
  10.     .aside li a{color:peru;}
  11.     .aside li.current{background-color:coral;}
  12.     .aside li.current a {color: #fff;}
  13. </style>

html代码：

  1. <body style="height:5000px;">
  2.     <div class="container" id="box">
  3.         <div class="current">爱逛好货</div>
  4.         <div>好点主播</div>
  5.         <div>品质特色</div>
  6.         <div>猜你喜欢</div>
  7.     </div>
  8.     <ul class="aside" id="aside">
  9.         <li class="current">
  10.             <a href="javascript:void(0);">爱逛好货</a>
  11.         </li>
  12.         <li>
  13.             <a href="javascript:void(0);">好点主播</a>
  14.         </li>
  15.         <li>
  16.             <a href="javascript:void(0);">品质特色</a>
  17.         </li>
  18.         <li>
  19.             <a href="javascript:void(0);">猜你喜欢</a>
  20.         </li>
  21.     </ul>
  22. </body>

javascript代码(myAnimation4.js)

  1. <script type="text/javascript">
  2.     //1.获取事件源
  3.     window.onload = function(){
  4.         //1.获取标签
  5.         var box = document.getElementById('box');
  6.         var allBoxs = box.children;
  7.         var aside = document.getElementById('aside');
  8.         var lis = aside.children;
  9.         var isClick = false;//默认没有滚动
  11.         //2.上色
  12.         var colors = ['red','pink','purple','blue'];
  13.         for(var i=0;i<allBoxs.length;i++){
  14.             allBoxs[i].style.backgroundColor = colors[i];
  15.         }    
  17.         //3.监听侧边栏按钮的点击
  18.         for(var j=0;j<lis.length;j++){
  19.             lis[j].index = j;
  20.             lis[j].onclick = function(){
  21.                 isClick = true;
  22.                 for(var k = 0;k < lis.length;k++){
  23.                     lis[k].className = '';
  24.                 }
  25.                 //设置当前的类
  26.                 this.className = 'current';
  27.                 //页面动画起来
  28.                 startAnimation(document.documentElement,{
  29.                     "scrollTop" : this.index * (document.body.clientHeight)
  30.                     },function(){
  31.                         isClick = false;
  32.                 })
  33.                 // document.documentElement.scrollTop = this.index*(document.body.clientHeight);        
  34.             }
  35.         }
  36.     //4.监听滚动
  37.         window.onscroll = function(){
  38.             if(!isClick){
  39.                 //4.1获取页面滚动的高度
  40.                 var docScrollTop = document.documentElement.scrollTop+20 || document.body.scrollTop+20;
  41.                 for(var i=0;i<lis.length;i++){
  42.                     if(docScrollTop > allBoxs[i].offsetTop){
  43.                         for(var j =0;j<allBoxs.length;j++){
  44.                             lis[j].className = '';
  45.                         }
  46.                         lis[i].className = 'current';
  47.                     }
  48.                 }
  49.             }
  50.         }        
  51.     }
  53. </script>

轮播图特效

css代码

  1. *{
  2.     padding:0px;
  3.     margin:0px;
  4. }
  5. .slider{
  6.     width:400px;
  7.     height:500px;
  8.     margin:100px auto;
  9.     position:relative;
  10.     overflow: hidden;
  11. }
  12. .slider .slider_scroll{
  13.     position:relative;
  14.     width:400px;
  15.     height:500px;
  16. }
  17. .slider_main{
  18.     position:relative;
  19.     width:400px;
  20.     height:500px;
  21. }
  22. .slider_main .item{
  23.     width:400px;
  24.     height:500px;
  25.     position:absolute;
  26. }
  27. .slider_main .item img{
  28.     width:400px;
  29.     height:500px;
  30. }
  31. .slider_index{
  32.     width:400px;
  33.     height:40px;
  34.     text-align:center;
  35.     color:#fff;
  36.     font-weight:700;
  37.     z-index:20;
  38.     position:absolute;
  39.     bottom:0;
  40.     background-color:rgb(0,0,0,0.5);
  41.     cursor:pointer;
  42. }
  43. .slider_index .slider_index_icon{
  44.     display: inline-block;
  45.     line-height: 40px;
  46.     margin: 0 10px;
  47. }
  48. .slider_index .slider_index_icon.current{
  49.     color: red;
  50. }
  51. .slider_scroll span{
  52.     position: absolute;
  53.     width:30px;
  54.     height:68px;
  55.     background:url(../images/icon-slides.png) no-repeat;
  56.     top:50%;
  57.     margin-top:-34px;
  58.     cursor:pointer;
  59.     z-index:30;
  60. }
  61. .slider_scroll span.next{
  62.     right: 0;
  63.     background-position: -46px 0;
  64. }
  65. .slider_scroll span.prev{
  66.     left: 0;
  67.     background-position: 0 0;
  68. }

html代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>p_20 轮播图特效</title>
  6.         <link rel="stylesheet" href="css/index.css" type="text/css">
  7.     </head>
  8.     <body>
  9.         <div id="slider" class="slider">
  10.             <div class="slider_scroll" id="slider_scroll">
  11.                 <div class="slider_main" id="slider_main">
  12.                     <div class="item">
  13.                         <a href="#">
  14.                             <img src="images/img1.png">
  15.                         </a>
  16.                     </div>
  17.                     <div class="item">
  18.                         <a href="#">
  19.                             <img src="images/img2.png">
  20.                         </a>
  21.                     </div>
  22.                     <div class="item">
  23.                         <a href="#">
  24.                             <img src="images/img3.png">
  25.                         </a>
  26.                     </div>
  27.                     <div class="item">
  28.                         <a href="#">
  29.                             <img src="images/img4.png">
  30.                         </a>
  31.                     </div>
  32.                 </div>
  34.                 <span class="next" id="next"></span>
  35.                 <span class="prev" id="prev"></span>
  36.             </div>
  37.             <div class="slider_index" id="slider_index">
  38.                 <!-- 通过js脚本动态生成 -->
  39.             </div>
  40.         </div>
  41.         <script src="../js/myAnimation4.js" type="text/javascript" charset="utf-8"></script>
  42.         <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
  43.     </body>
  44. </html>

index.js代码

  1. window.onload = function(){
  2.     //1.获取标签
  3.     var slider = document.getElementById('slider');
  4.     var slider_main = document.getElementById('slider_main');
  5.     var allBoxs = slider_main.children;
  6.     var next = document.getElementById('next');
  7.     var prev = document.getElementById('prev');
  8.     var slider_index = document.getElementById('slider_index');
  9.     var iNow = 0;//当前可视元素的索引
  10.     var timer =null;
  12.     //2.动态创建索引器
  13.     for(var i=0;i < allBoxs.length;i++){
  14.         var span = document.createElement('span');
  15.         if(i === 0){
  16.             span.className = 'slider_index_icon current';    
  17.         }else{
  18.             span.className = 'slider_index_icon';    
  19.         }
  20.         span.innerText = i + 1;
  21.         slider_index.appendChild(span);
  22.     }
  23.     //3.让滚动的元素归位
  24.     var scroll_w = parseInt(getStyle(slider,'width'));
  25.     // console.log(scroll_w);
  26.     for(var j=1;j < allBoxs.length;j++){
  27.         allBoxs[j].style.left = scroll_w +'px';
  28.     }
  29.     //4.监听下一张按钮的事件
  30.     next.onclick = function(){
  31.         // 1.让当前可视元素动画左移
  32.         // 2.让下一张图片快速的显示到右边
  33.         // 3.让这个元素动画进入
  34.         startAnimation(allBoxs[iNow],{
  35.             "left":-scroll_w
  36.         })
  37.         //让iNow更新
  38.         iNow ++;
  39.         if(iNow >= allBoxs.length){
  40.             iNow = 0;
  41.         }
  42.         allBoxs[iNow].style.left = scroll_w +'px';
  43.         startAnimation(allBoxs[iNow],{
  44.             "left":0
  45.         })
  46.         //改变索引
  47.         changeIndex();
  48.     }
  49.     //5.监听上一张按钮的事件
  50.     prev.onclick = function(){
  51.         // 1.让当前元素快速右移
  52.         // 2.让上一个元素快速到左边
  53.         // 3.让这个元素动画进入
  54.         startAnimation(allBoxs[iNow],{
  55.             "left":scroll_w
  56.         })
  57.         iNow--;
  58.         if(iNow < 0){
  59.             iNow =allBoxs.length-1;
  60.         }
  61.         allBoxs[iNow].style.left = -scroll_w + 'px';
  62.         startAnimation(allBoxs[iNow],{
  63.             "left":0
  64.         })
  65.         //改变索引器
  66.         changeIndex();
  67.     }
  70.     var slider_index_icons = slider_index.children;
  71.     //6.遍历索引器，添加监听事件
  72.     for(var i=0;i<slider_index_icons.length;i++){
  73.         slider_index_icons[i].onmousedown = function(){
  74.             //6.1获取当前点击的索引
  75.             var index = parseInt(this.innerText) - 1;
  76.             //点击的索引与当前的索引iNow并与之对比
  77.             if(index > iNow){
  78.                 //下一个操作
  79.                 startAnimation(allBoxs[iNow],{
  80.                     'left':-scroll_w
  81.                 })
  82.                 allBoxs[index].style.left = scroll_w + 'px';
  83.             }else if(index < iNow){
  84.                 //上一个操作
  85.                 startAnimation(allBoxs[iNow],{
  86.                     'left':scroll_w
  87.                 })
  88.                 allBoxs[index].style.left = -scroll_w + 'px';
  89.             }
  90.             iNow = index;
  91.             startAnimation(allBoxs[iNow],{
  92.                 "left":0
  93.             })
  94.             changeIndex();
  95.         }
  96.     }
  98.     //7自动轮播图
  99.     timer = setInterval(autoPlay,1000);
  100.     slider.onmouseover = function(){
  101.         clearInterval(timer);
  102.     }
  103.     slider.onmouseout = function(){
  104.         timer = setInterval(autoPlay,1000);
  105.     }
  107.     function autoPlay(){
  108.         // 1.让当前可视元素动画左移
  109.         // 2.让下一张图片快速的显示到右边
  110.         // 3.让这个元素动画进入
  111.         startAnimation(allBoxs[iNow],{
  112.             "left":-scroll_w
  113.         })
  114.         //让iNow更新
  115.         iNow ++;
  116.         if(iNow >= allBoxs.length){
  117.             iNow = 0;
  118.         }
  119.         allBoxs[iNow].style.left = scroll_w +'px';
  120.         startAnimation(allBoxs[iNow],{
  121.             "left":0
  122.         })
  123.         //改变索引
  124.         changeIndex();
  125.     }
  127.     //控制当前的索引
  128.     function changeIndex(){
  129.         for(var i=0;i<slider_index_icons.length;i++){
  130.             slider_index_icons[i].className = 'slider_index_icon';
  131.         }
  132.         slider_index_icons[iNow].className = 'slider_index_icon current';
  133.     }    
  134. }
上一条：微信公众平台开发(1)--概述下一条：mysqli预处理操作数据库（增删改查）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多