JavaScript-11
1.动画函数封装
- 动画实现原理：通过定时器setInterval()不断移动盒子的位置
注意：此元素一定要添加定位，才能使用element.style.left
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 #box{ 12 /* 注意此元素一定要添加定位 */ 13 position: absolute; 14 height: 200px; 15 width: 200px; 16 background-color: deeppink; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="box"></div> 22 <script type="text/javascript"> 23 var box = document.querySelector("#box"); 24 var move = setInterval(function(){ 25 box.style.top = box.offsetTop + 1 + 'px'; 26 if(box.offsetTop === 20){ 27 clearInterval(move); 28 } 29 },100); 30 </script> 31 </body> 32 </html>
- 简单函数封装
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #box{ 12 position: absolute; 13 width: 150px; 14 height: 150px; 15 background-color: lightpink; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="box"></div> 21 <script type="text/javascript"> 22 // 简单动画函数封装 23 var box = document.querySelector('#box'); 24 // object：目标对象；target：目标位置 25 function animate(object,target){ 26 var move = setInterval(function(){ 27 object.style.left = ++object.offsetLeft + 'px'; 28 if(object.offsetLeft >= target) 29 clearInterval(move); 30 },30) 31 } 32 animate(box,400); 33 </script> 34 </body> 35 </html>
- 给不同的函数记录不同的定时器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #box{ 12 position: absolute; 13 width: 150px; 14 height: 150px; 15 background-color: lightpink; 16 } 17 #baojuan{ 18 top:180px; 19 position: absolute; 20 width: 200px; 21 height: 200px; 22 background-color: lightgreen; 23 } 24 </style> 25 </head> 26 <body> 27 <button type="button">点击宝娟开始走</button> 28 <div id="box"></div> 29 <div id = 'baojuan'></div> 30 <script type="text/javascript"> 31 // 简单动画函数封装 32 var box = document.querySelector('#box'); 33 var btn = document.querySelector('button'); 34 var baojuan = document.querySelector('#baojuan'); 35 // object：目标对象；target：目标位置 36 function animate(object,target){ 37 // 给不同的元素添加不同的定时器 38 // 先清除以前的定时器，只保留一个定时器 39 clearInterval(object.move); 40 object.move = setInterval(function(){ 41 object.style.left = ++object.offsetLeft + 'px'; 42 if(object.offsetLeft >= target) 43 clearInterval(object.move); 44 },30) 45 } 46 animate(box,400); 47 // 当我们不断点击这个按钮，元素的速度会越来越快，解决方案是让我们元素只有一个计时器 48 btn.addEventListener('click',function(){ 49 animate(baojuan,500); 50 }) 51 </script> 52 </body> 53 </html>
- 缓动动画原理
缓动动画就是让元素的运动速度有所变化，最常见的是让速度慢慢停下来
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 background-color: #FFB6C1; 13 height: 200px; 14 width: 200px; 15 position: absolute; 16 } 17 </style> 18 </head> 19 <body> 20 <button>点我一下就动</button> 21 <div class="box"></div> 22 <script type="text/javascript"> 23 /* 24 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来 25 -核心算法：（目标值-现在的位置） / 10 作为每次移动的距离步长
26 由于存在除法运算可能出现小数，我们使用Math.ceil()对函数进行向上取整 27 */ 28 function animate(obj,target){ 29 clearInterval(obj.move); 30 obj.move = setInterval(function(){ 31 if(target-obj.offsetLeft == 0){ 32 clearInterval(obj.move); 33 } 34 obj.style.left = Math.ceil(obj.offsetLeft + (target-obj.offsetLeft)) / 10 + 'px'; 35 },15); 36 } 37 var btn = document.querySelector('button'); 38 var box = document.querySelector('.box'); 39 btn.addEventListener('click',function(){ 40 console 41 animate(box,500) 42 }) 43 // 匀速动画就是盒子当前的位置+固定值10 44 // 缓速动画就是盒子当前的位置+（目标值-当前值）/10 45 </script> 46 </body> 47 </html>
- 动画函数在多个目标值之间移动
当我们点击按钮时，判断步长是正值还是负值
1.如果是正值，则步长往大了取整：Math.ceil()
2.如果是负值，则步长往小了取整：Math.floor()
- 缓动动画添加回调函数
回调函数原理：函数可以作为一个参数，将这个函数作为参数传递到另一个函数里，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/animate.js"></script> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .sliderbar{ 13 margin-left: 200px; 14 margin-top: 50px; 15 } 16 span{ 17 position: absolute; 18 width: 30px; 19 height: 30px; 20 background-color: #FFB6C1; 21 z-index: 999; 22 } 23 .con{ 24 position: absolute; 25 width: 100px; 26 height: 30px; 27 background-color: lightblue; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="sliderbar"> 33 <span>←</span> 34 <div class="con">问题反馈</div> 35 </div> 36 <script type="text/javascript"> 37 // 获取元素 38 var span = document.querySelector('span'); 39 var con = document.querySelector('.con'); 40 console.log(con.offsetLeft); 41 span.addEventListener('mouseenter',function(){ 42 animate(con,130); 43 }); 44 span.addEventListener('mouseout',function(){ 45 animate(con,200); 46 }); 47 </script> 48 </body> 49 </html>
- 轮播图案例
- HTML文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <!-- 引入首页的js文件 --> 7 <script src="js/animate.js"></script> 8 <script src="js/index.js"></script> 9 <style type="text/css"> 10 *{ 11 padding: 0; 12 margin: 0; 13 } 14 .box{ 15 position: absolute; 16 border: 1px solid #000; 17 width: 250px; 18 height: 250px; 19 margin-top: 100px; 20 margin-left: 400px; 21 overflow: hidden; 22 } 23 .box-l{ 24 top: 115px; 25 position: absolute; 26 z-index: 99999; 27 } 28 .box-r{ 29 position: absolute; 30 top: 115px; 31 margin-left: 238px; 32 z-index: 99999; 33 } 34 .box-l a{ 35 color: #000; 36 text-decoration: none; 37 } 38 .box-r a{ 39 color: #000; 40 text-decoration: none; 41 } 42 .pic{ 43 position: absolute; 44 left: 0; 45 top: 0; 46 width: 700%; 47 } 48 .pic li{ 49 list-style: none; 50 float: left; 51 } 52 .circle li{ 53 width: 6px; 54 height: 6px; 55 border: #000 solid 1px; 56 border-radius: 50%; 57 list-style: none; 58 margin: 6px; 59 display: inline-block; 60 } 61 .circle{ 62 position: relative; 63 margin-top: 225px; 64 margin-left: 60px; 65 } 66 .current{ 67 background-color: #000; 68 } 69 </style> 70 </head> 71 <body> 72 <div class="box"> 73 <span class="box-l"><a href="javascript:;"><</a></span> 74 <span class="box-r"><a href="javascript:;">></a></span> 75 <ul class="pic"> 76 <li><img src="img/GULULU-彩虹宝宝.png" width="250px"></li> 77 <li><img src="img/圣诞老人10.png" width="250px"></li> 78 <li><img src="img/圣诞老人9.png" width="250px"></li> 79 <li><img src="img/寿星.png" width="250px"></li> 80 <li><img src="img/禄星.png" width="250px"></li> 81 <li><img src="img/福星.png" width="250px"></li> 82 </ul> 83 <ol class="circle"></ol> 84 </div> 85 </body> 86 </html>
-
- JS文件
1 function animate(obj,target,callback){ 2 clearInterval(obj.move); 3 obj.move = setInterval(function(){ 4 var step = (target - obj.offsetLeft) / 10; 5 step = step > 0 ? Math.ceil(step) : Math.floor(step); 6 if(step == 0){ 7 clearInterval(obj.move); 8 if(callback){ 9 callback(); 10 } 11 } 12 obj.style.left = step + obj.offsetLeft + 'px'; 13 },15); 14 }
1 window.addEventListener('load',function(){ 2 // 箭头隐藏和显示操作 3 var box = document.querySelector('.box'); 4 var al = document.querySelector('.box-l'); 5 var ar = document.querySelector('.box-r'); 6 var flag = 1; 7 box.addEventListener('mousemove',function(){ 8 al.style.visibility = 'visible'; 9 ar.style.visibility = 'visible'; 10 clearInterval(timer); 11 }) 12 box.addEventListener('mouseout',function(){ 13 al.style.visibility = 'hidden'; 14 ar.style.visibility = 'hidden'; 15 timer = setInterval(function(){ 16 // 手动调用点击事件 17 ar.click(); 18 },2000) 19 }) 20 // 动态生成圆圈 21 var imgs = document.querySelectorAll('img'); 22 var ul = document.querySelector('.circle'); 23 for(var i = 0 ; i < imgs.length ; i++){ 24 var li = document.createElement('li'); 25 if(i === 0){ 26 li.className = 'current'; 27 } 28 li.setAttribute('index',i) 29 ul.appendChild(li); 30 } 31 // 点击小圆圈变色（利用排他思想）以及点击小圆圈滚动 32 var lis = ul.querySelectorAll('li'); 33 var pic = document.querySelector('.pic'); 34 for(var i = 0 ; i <lis.length ; i++){ 35 lis[i].addEventListener('click',function(){ 36 for(var j = 0 ; j < lis.length ; j++){ 37 lis[j].className = ''; 38 } 39 this.className = 'current'; 40 animate(pic,-this.getAttribute('index')*250); 41 // console.log(this.getAttribute('index')); 42 flag = +this.getAttribute('index') + 1; 43 }) 44 } 45 //点击右侧按钮，图片轮换 46 var imgs = document.querySelectorAll('img'); 47 ar.addEventListener('click',function(){ 48 if(flag < imgs.length){ 49 animate(pic,-flag*250); 50 flag++; 51 }else{ 52 pic.style.left = 0; 53 flag = 1; 54 } 55 var key = flag - 1; 56 for(var j = 0 ; j < lis.length ; j++){ 57 lis[j].className = ''; 58 } 59 lis[key].className = 'current'; 60 }) 61 al.addEventListener('click',function(){ 62 if(flag == 1){ 63 flag = 6; 64 pic.style.left = -(flag - 1) * 250 + 'px'; 65 }else{ 66 flag--; 67 animate(pic,-(flag - 1)*250) 68 } 69 var key = flag - 1; 70 for(var j = 0 ; j < lis.length ; j++){ 71 lis[j].className = ''; 72 } 73 lis[key].className = 'current'; 74 }) 75 // 自动播放轮播图 76 var timer = setInterval(function(){ 77 // 手动调用点击事件 78 ar.click(); 79 },2000) 80 })
- 节流阀
防止轮播图按钮连续点击造成播放过快
目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数
1 window.addEventListener('load',function(){ 2 // 箭头隐藏和显示操作 3 var box = document.querySelector('.box'); 4 var al = document.querySelector('.box-l'); 5 var ar = document.querySelector('.box-r'); 6 var flag = 1; 7 var judge = true; 8 box.addEventListener('mousemove',function(){ 9 al.style.visibility = 'visible'; 10 ar.style.visibility = 'visible'; 11 clearInterval(timer); 12 }) 13 box.addEventListener('mouseout',function(){ 14 al.style.visibility = 'hidden'; 15 ar.style.visibility = 'hidden'; 16 timer = setInterval(function(){ 17 // 手动调用点击事件 18 ar.click(); 19 },2000) 20 }) 21 // 动态生成圆圈 22 var imgs = document.querySelectorAll('img'); 23 var ul = document.querySelector('.circle'); 24 for(var i = 0 ; i < imgs.length ; i++){ 25 var li = document.createElement('li'); 26 if(i === 0){ 27 li.className = 'current'; 28 } 29 li.setAttribute('index',i) 30 ul.appendChild(li); 31 } 32 // 点击小圆圈变色（利用排他思想）以及点击小圆圈滚动 33 var lis = ul.querySelectorAll('li'); 34 var pic = document.querySelector('.pic'); 35 for(var i = 0 ; i <lis.length ; i++){ 36 lis[i].addEventListener('click',function(){ 37 for(var j = 0 ; j < lis.length ; j++){ 38 lis[j].className = ''; 39 } 40 this.className = 'current'; 41 animate(pic,-this.getAttribute('index')*250); 42 // console.log(this.getAttribute('index')); 43 flag = +this.getAttribute('index') + 1; 44 }) 45 } 46 //点击右侧按钮，图片轮换 47 var imgs = document.querySelectorAll('img'); 48 ar.addEventListener('click',function(){ 49 if(judge){ 50 judge = false; 51 if(flag < imgs.length){ 52 animate(pic,-flag*250,function(){ 53 judge = true; 54 }); 55 flag++; 56 }else{ 57 pic.style.left = 0; 58 flag = 1; 59 judge = true; 60 } 61 var key = flag - 1; 62 for(var j = 0 ; j < lis.length ; j++){ 63 lis[j].className = ''; 64 } 65 lis[key].className = 'current'; 66 } 67 }) 68 al.addEventListener('click',function(){ 69 if(judge){ 70 judge = false; 71 if(flag == 1){ 72 flag = 6; 73 pic.style.left = -(flag - 1) * 250 + 'px'; 74 judge = true; 75 }else{ 76 flag--; 77 animate(pic,-(flag - 1)*250,function(){ 78 judge = true; 79 }) 80 } 81 var key = flag - 1; 82 for(var j = 0 ; j < lis.length ; j++){ 83 lis[j].className = ''; 84 } 85 lis[key].className = 'current'; 86 } 87 }) 88 // 自动播放轮播图 89 var timer = setInterval(function(){ 90 // 手动调用点击事件 91 ar.click(); 92 },2000) 93 })
- 返回顶部
window.scroll(x,y)
1 function animate(obj,target,callback){ 2 clearInterval(obj.move); 3 obj.move = setInterval(function(){ 4 var step = (target - window.pageYOffset) / 10; 5 step = step > 0 ? Math.ceil(step) : Math.floor(step); 6 if(step == 0){ 7 clearInterval(obj.move); 8 if(callback){ 9 callback(); 10 } 11 // callback&&callback() 12 } 13 window.scroll(0,window.pageYOffset + step) 14 },15); 15 }
- 筋斗云案例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/animate.js"></script> 7 <script src="js/筋斗云.js"></script> 8 <style type="text/css"> 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 .box{ 14 border: 1px solid #000; 15 width: 1000px; 16 position: absolute; 17 margin-top: 20px; 18 margin-left: 20px; 19 height: 70px; 20 } 21 .tab{ 22 position: absolute; 23 left: 0; 24 top: 0; 25 margin-left: 20px; 26 margin-top: 20px; 27 } 28 .tab li{ 29 list-style: none; 30 float: left; 31 left: 0; 32 top: 0; 33 width: 80px; 34 /* z-index: 999; */ 35 font-size: 13px; 36 } 37 img{ 38 opacity: 50%; 39 position: absolute; 40 left: 0; 41 top: 0; 42 margin-top: -25px; 43 z-index: -999; 44 } 45 .tab a{ 46 text-decoration: none; 47 color: black; 48 } 49 #current{ 50 color: red; 51 } 52 </style> 53 </head> 54 <body> 55 <div class="box"> 56 <ul class="tab"> 57 <li><a index = 0 id="current" href="javascript:;">首页新闻</a><img src="img/祥云.png" width="80px" ></li> 58 <li><a index = 1 href="javascript:;">师资力量</a></li> 59 <li><a index = 2 href="javascript:;">活动策划</a></li> 60 <li><a index = 3 href="javascript:;">企业文化</a></li> 61 <li><a index = 4 href="javascript:;">招聘信息</a></li> 62 <li><a index = 5 href="javascript:;">公司简介</a></li> 63 <li><a index = 6 href="javascript:;">上海校区</a></li> 64 <li><a index = 7 href="javascript:;">广州校区</a></li> 65 </ul> 66 </div> 67 <script type="text/javascript"> 68 </script> 69 </body> 70 </html>
1 window.addEventListener('load',function(){ 2 var lis = document.querySelectorAll('li'); 3 var as = document.querySelectorAll('a'); 4 var img = document.querySelector('img'); 5 // 鼠标点击标签变色 6 var index = 0; 7 for(var i = 0 ; i < as.length ; i++){ 8 as[i].addEventListener('click',function(){ 9 for(var j = 0 ; j < as.length ; j++){ 10 as[j].id = ''; 11 } 12 this.id = 'current'; 13 index = this.getAttribute('index'); 14 animate(img,this.getAttribute('index')*img.offsetWidth); 15 }) 16 } 17 // 鼠标滑动的current事件 18 for(var i = 0 ; i < as.length ; i++){ 19 as[i].addEventListener('mouseenter',function(){ 20 for(var j = 0 ; j < lis.length ; j++){ 21 as[j].id = ''; 22 } 23 this.id = 'current'; 24 animate(img,this.getAttribute('index')*img.offsetWidth); 25 }) 26 as[i].addEventListener('mouseout',function(){ 27 for(var j = 0 ; j < as.length ; j++){ 28 as[j].id = ''; 29 } 30 as[index].id = 'current' 31 animate(img,as[index].getAttribute('index')*img.offsetWidth); 32 }) 33 } 34 })
浙公网安备 33010602011771号