迟缓动画的原理
迟缓动画就是让元素的静止速度有所变动，最常见的迟缓动画就是让动画速度缓缓停下来
外围思路
- 让盒子每次挪动的间隔缓缓变小，速度就会缓缓变小
- 外围算法：（目标值-当初的地位）/10 作为每次挪动的间隔步长
- 进行的条件：让盒子以后的地位等于指标的地位，就进行定时器
- 留神步长值须要取整
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } button { margin: 50px; } img { position: absolute; display: block; width: 200px; height: 200px; border-radius: 50%; } </style></head><body> <button>点击挪动至800</button> <button>点击挪动至0</button> <img src="./image/头像.jpg" alt=""> <script> var bth = document.querySelectorAll('button'); var img = document.querySelector('img') // obj：指标对象 target:指标地位 function aniamte(obj, target) { // 革除以前的定时器，只保留以后的计时器 clearInterval(obj.timer); obj.timer = setInterval(function() { // 如果步长为正值 则取大 如果步长为负值 则取小 var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); // 判断：如果指标对象的地位等于指标地位，则革除定时器 if (obj.offsetLeft == target) { clearInterval(obj.timer) } obj.style.left = obj.offsetLeft + step + "px" }, 15); } // 进行调用 bth[0].addEventListener('click', function() { aniamte(img, 800) }) bth[1].addEventListener('click', function() { aniamte(img, 0) }) </script></body></html>迟缓动画增加回调函数
外围思路：回调函数要增加到定时器完结的地位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } button { margin: 50px; } img { position: absolute; display: block; width: 200px; height: 200px; border-radius: 50%; } .photo { width: 500px; height: 500px; } </style></head><body> <button>点击挪动至800</button> <button>点击挪动至0</button> <img src="./image/头像.jpg" alt="" class="img"> <script> var bth = document.querySelectorAll('button'); var img = document.querySelector('img') // obj：指标对象 target:指标地位 function aniamte(obj, target, callback) { // 革除以前的定时器，只保留以后的计时器 clearInterval(obj.timer); obj.timer = setInterval(function() { // 如果步长为正值 则取大 如果步长为负值 则取小 var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); // 判断：如果指标对象的地位等于指标地位，则革除定时器 if (obj.offsetLeft == target) { clearInterval(obj.timer); // 回调函数要增加到定时器完结的地位 if (callback) { callback() } } obj.style.left = obj.offsetLeft + step + "px" }, 15); } // 进行调用 bth[0].addEventListener('click', function() { aniamte(img, 800, function() { img.className = 'img' }) }) bth[1].addEventListener('click', function() { aniamte(img, 0, function() { img.className = 'photo img' }) }) </script></body></html>引进animate动画函数
animate.js文件
var bth = document.querySelectorAll('button');var img = document.querySelector('img') // obj：指标对象 target:指标地位function aniamte(obj, target, callback) { // 革除以前的定时器，只保留以后的计时器 clearInterval(obj.timer); obj.timer = setInterval(function() { // 如果步长为正值 则取大 如果步长为负值 则取小 var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); // 判断：如果指标对象的地位等于指标地位，则革除定时器 if (obj.offsetLeft == target) { clearInterval(obj.timer); // 回调函数要增加到定时器完结的地位 if (callback) { callback() } } obj.style.left = obj.offsetLeft + step + "px" }, 15);}// 进行调用bth[0].addEventListener('click', function() { aniamte(img, 800, function() { img.className = 'img' })})bth[1].addEventListener('click', function() { aniamte(img, 0, function() { img.className = 'photo img' })})主文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .sliderbar { position: fixed; right: 0; bottom: 100px; width: 40px; height: 40px; text-align: center; line-height: 40px; color: #fff; cursor: pointer; } .con { position: absolute; top: 0; left: 0; width: 200px; height: 40px; background-color: purple; z-index: -1; } </style> <script src="./animate.js"></script></head><body> <div class="sliderbar"> <span> ← </span> <div class="con">问题反馈</div> </div> <script> var sliderbar = document.querySelector('.sliderbar'); var con = document.querySelector('.con'); sliderbar.addEventListener('mouseenter', function() { aniamte(con, -160, function() { sliderbar.children[0].innerHTML = "→" }) }) sliderbar.addEventListener('mouseleave', function() { aniamte(con, 0, function() { sliderbar.children[0].innerHTML = "← " }) }) </script></body></html>