微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 第七章 JavaScript动画
博主信息
博文 22
粉丝 0
评论 1
访问量 22690
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
第七章 JavaScript动画
刘静的博客
原创
840人浏览过

第七章 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. }
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录