简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 第七章 JavaScript动画
Blogger Information
Blog 22
fans 0
comment 1
visits 17594
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第七章 JavaScript动画
刘静的博客
Original
648 people have browsed it

第七章 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. }
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！