JS---案例：手风琴 （利用封装好的动画函数）
案例：手风琴
封装好的动画函数在common.js里面
//function getStyle(element, attr) {...}
//function animate(element, json, fn) {...}
手风琴设置的是背景图吗,backgroudImage="url(image/***.jpg)";
当鼠标进入的时候，当前的宽度变为800，其余的遍历并设置为100；
鼠标离开的时候，所有li宽度变为400
<!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;
}
div ul {
width: 1300px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="common.js"></script>
<script>
//下面2个封装好的函数在common.js里面
//function getStyle(element, attr) {
//function animate(element, json, fn) {
//先获取所有的li标签
var list = my$("box").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
//鼠标进入
list[i].onmouseover = mouseoverHandle;
//鼠标离开
list[i].onmouseout = mouseoutHandle;
}
//进入和离开函数
function mouseoverHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j], { "width": 100 });//动画效果
}
animate(this, { "width": 800 });
}
function mouseoutHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j], { "width": 240 });//动画效果
}
}
</script>
</body>
</html> 相关推荐
xiaoseyihe 2020-11-16
世事一场大梦 2020-10-18
jling 2020-10-14
kyelu 2020-08-03
KAIrving 2020-08-02
xiesheng 2020-08-02
liushall 2020-07-18
shenwenjie 2020-07-07
yunfenglee 2020-07-08
83520298 2020-07-06
Jonderwu 2020-07-05
xiaobater 2020-07-04
范范 2020-06-28
newusb 2020-06-28