手风琴
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>JS——缓慢动画封装案例
原文地址：http://www.cnblogs.com/wuqiuxue/p/8000135.html