JS——缓慢动画封装案例
手风琴
1、排他思想
2、ul宽度需要大一点，防止li撑开跑下去
3、一个变大其他所有变小，变小不能太小，不然会出现空白
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } div { width: 1200px; margin: 150px auto; border: 1px solid #CC6153; overflow: hidden; } ul { width: 1300px; height: 460px; list-style: none; } li { float: left; width: 240px; height: 460px; } </style> </head> <body> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> var div = document.getElementsByTagName("div")[0]; var ul = div.children[0]; var liArr = ul.children; for (var i = 0; i < liArr.length; i++) { liArr[i].style.background = "url('images/" + (i + 6) + ".jpg') no-repeat"; liArr[i].onmouseover = function () { for (var j = 0; j < liArr.length; j++) { animate(liArr[j], {"width": 120}); } animate(this, {"width": 800}) } liArr[i].onmouseout = function (ev) { for (var j = 0; j < liArr.length; j++) { animate(liArr[j], {"width": 240}); } } } //参数变为2个，将属性atrr和值都存储到json中 function animate(ele, json, fn) { //先清定时器 clearInterval(ele.timer); ele.timer = setInterval(function () { //开闭原则 var bool = true; //遍历属性和值，分别单独处理json //attr == k(键) target == json[k](值) for (var k in json) { //四部 var leader = parseInt(getStyle(ele, k)) || 0; //1.获取步长 var step = (json[k] - leader) / 10; //2.二次加工步长 step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; //3.赋值 ele.style[k] = leader + "px"; //4.清除定时器 //判断: 目标值和当前值的差大于步长，就不能跳出循环 //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。 // if (json[k] !== leader) { // bool = false; // } if (Math.abs(json[k] - leader) > Math.abs(step)) { bool = false; } } console.log(1); //只有所有的属性都到了指定位置，bool值才不会变成false； if (bool) { for (k in json) { ele.style[k] = json[k] + "px"; } clearInterval(ele.timer); //所有程序执行完毕之后执行回调函数 //现在只有传递了回调函数，才能执行 if (fn) { fn(); } } }, 5); } function getStyle(ele, attr) { if (window.getComputedStyle) { return window.getComputedStyle(ele, null)[attr]; } return ele.currentStyle[attr]; } </script> </body> </html>
仿360开机
1、首先下盒子高度变为0，之后整体盒子宽度变为0
2、本例子没有用图片，最好盒子以图片形式为好
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .box { width: 200px; height: 300px; position: fixed; bottom: 0; right: 0; } span { position: absolute; top: 0; right: 0; width: 20px; height: 20px; font: 400 18px/20px "simsun"; text-align: center; background-color: #ccc; } .up, .down { width: 200px; height: 150px; font: 400 23px/150px "simsun"; text-align: center; background-color: #ccc; } </style> </head> <body> <div class="box"> <span>×</span> <div class="up">上盒子</div> <div class="down">下盒子</div> </div> <script> var span = document.getElementsByTagName("span")[0]; var box = span.parentNode; var down = box.children[2]; //开始让下盒子的高度变成0 之后让大盒子宽度变为0 span.onclick = function () { animate(down, {"height": 0}, function () { animate(box, {"width": 0}) }); } //参数变为2个，将属性atrr和值都存储到json中 function animate(ele, json, fn) { //先清定时器 clearInterval(ele.timer); ele.timer = setInterval(function () { //开闭原则 var bool = true; //遍历属性和值，分别单独处理json //attr == k(键) target == json[k](值) for (var k in json) { //四部 var leader = parseInt(getStyle(ele, k)) || 0; //1.获取步长 var step = (json[k] - leader) / 10; //2.二次加工步长 step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; //3.赋值 ele.style[k] = leader + "px"; //4.清除定时器 //判断: 目标值和当前值的差大于步长，就不能跳出循环 //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。 // if (json[k] !== leader) { // bool = false; // } if (Math.abs(json[k] - leader) > Math.abs(step)) { bool = false; } } console.log(1); //只有所有的属性都到了指定位置，bool值才不会变成false； if (bool) { for (k in json) { ele.style[k] = json[k] + "px"; } clearInterval(ele.timer); ele.style.display = "none"; //所有程序执行完毕之后执行回调函数 //现在只有传递了回调函数，才能执行 if (fn) { fn(); } } }, 15); } function getStyle(ele, attr) { if (window.getComputedStyle) { return window.getComputedStyle(ele, null)[attr]; } return ele.currentStyle[attr]; } </script> </body> </html>
