手风琴
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>
时间： 2024-10-03 19:20:01