缓动动画效果实例
鼠标经过前
鼠标经过后
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引用animate动画函数</title> <style> .sliderbar { position: fixed; right: 0; bottom: 100px; width: 40px; height: 40px; text-align: center; line-height: 40px; cursor: pointer; color: #fff; } .con { position: absolute; left: 0; top: 0; width: 200px; height: 40px; background-color: purple; z-index: -1; } </style> </head> <body> <div class="sliderbar"> <span>←</span> <div class="con">问题反馈</div> </div> <script src="animate.js"></script> <script> // 1.获取元素 var sliderbar = document.querySelector(".sliderbar") var con = document.querySelector(".con") // 当我们鼠标经过 sliderbar 就会让 con 这个盒子滑动到左侧 // 当我们鼠标离开 sliderbar 就会让 con 这个盒子滑动到右侧 sliderbar.addEventListener('mouseenter', function(){ animate(con, -160, function(){ // 当我们动画执行完毕, 就把 <-- 改为 --> sliderbar.children[0].innerHTML = '→' }) }) sliderbar.addEventListener('mouseleave', function(){ animate(con, 0, function(){ sliderbar.children[0].innerHTML = '←' }) }) </script> </body> </html>
animate.js
//简单动画函数封装obj目标对象 target 目标位置 //给不同的元素指定不同的定时器 function animate(obj, target, callBack) { console.log(callBack); // 当我们不断的点击按钮 这个元素的速度会越来越快 因为开启了太多的定时器 // 解决方案就是 让我们元素只有一个定时器执行 // 先清除以前的定时器 只保留当前的一个定时器执行 clearInterval(obj.timer) obj.timer = setInterval(function () { //步长值写到定时器的里面 // 把步长值改为整数 不要出现小数的问题 Math.ceil() 往上取整 // var step = Math.ceil((target - obj.offsetLeft) / 10) var step = ((target - obj.offsetLeft) / 10) // step > 0 向上取整 step < 0 向下取整 step = step > 0 ? Math.ceil(step) : Math.floor(step) if(obj.offsetLeft == target){ //停止动画 本质是停止定时器 clearInterval(obj.timer) //回调函数写到定时器结束里面 if(callBack){ //调用函数 callBack() } } // 获取是offsetLeft 赋值是style.left // 把每次加1 这个步长值 改为一个慢慢变小的值 (目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px' },15) } var span = document.querySelector('span') var btn500 = document.querySelector('.btn500') var btn800 = document.querySelector('.btn800') //调用函数 btn500.addEventListener('click',function(){ animate(span,500) }) btn800.addEventListener('click',function(){ //回调函数 animate(span,800, function(){ span.style.backgroundColor = 'red' }) }) // 匀速动画 就是 盒子是当前的位置 + 固定的值 10 // 缓动动画就是 盒子的当前位置 + 变化的值( (目标值 - 现在的位置) / 10 )
不积跬步无以至千里 不积小流无以成江海
