手风琴效果

最新推荐文章于 2022-07-11 20:28:25 发布

web加加

最新推荐文章于 2022-07-11 20:28:25 发布

阅读量280

点赞数

分类专栏： javascript

javascript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none
}

* {
margin: 0;
padding: 0;
}

div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}

div li {
width: 240px;
height: 400px;
float: left;
/*background-image: url(images/1.jpg);*/
}

div ul {
width: 1300px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
//找人
var box = document.getElementById("box");
var lis = box.getElementsByTagName("li");
//给每一个li动态添加背景图
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
//给每一个li绑定鼠标经过事件鼠标经过当前li排他
lis[i].onmouseover = function () {
//干掉所有人让每一个li的宽度渐渐地变为100
for (var i = 0; i < lis.length; i++) {
//lis[i]
animate(lis[i], {"width": 100});
}
//留下我自己让当前li的宽度渐渐地变为800
//this
animate(this, {"width": 800});
};
}
box.onmouseout = function () {
//把所有的li的宽度渐渐地变为240
for (var i = 0; i < lis.length; i++) {
animate(lis[i], {"width": 240});
}
};

function animate(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;//假设这一趟执行完成后所有的属性都到达了目标值
for (var k in json) {
var leader = parseInt(getStyle(obj, k)) || 0;
var target = json[k];
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
console.log("代码还在运行");
if (leader !== target) {//说明当前这个属性还没到目标也就是假设错了
flag = false;
}
}
if (flag) {//此时如果flag仍然是true 就说明都到了目标
clearInterval(obj.timer);
}
}, 15);
}

function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj)[attr];
} else {
return obj.currentStyle[attr];
}
}
</script>
</body>
</html>