手风琴动画
<!DOCTYPE html>
<html>
<head>
<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="../js/common.js"></script>
<script type="text/javascript">
// 先获取所有的li标签
var list = my$('box').getElementsByTagName('li');
for (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 (j = 0; j < list.length; j++) {
animate(list[j], {
"width": 100
}); //动画效果
}
animate(this, {
"width": 800
});
};
function mouseOutHandle() {
for (j = 0; j < list.length; j++) {
animate(list[j], {
"width": 240
}); //动画效果
}
};
</script>
</body>
</html>
开关机动画
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
<style>
.box {
width: 322px;
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
span {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<span id="closeButton"></span>
<div class="hd" id="headPart">
<img src="images/t.jpg" alt="" />
</div>
<div class="bd" id="bottomPart">
<img src="images/b.jpg" alt="" />
</div>
</div>
<script src="js/common.js"></script>
<script type="text/javascript">
// 设置最下面的div的高 渐渐变成0
my$('closeButton').onclick = function() {
animate(my$('bottomPart'), {
"height": 0
}, function() {
animate(my$('box'), {
"width": 0
})
});
};
</script>
</body>
</html>
数组中的方法
<script type="text/javascript">
var arr = [10, 20, 30, 40, 50];
console.log(arr.shift()); //删除数组中第一个元素
console.log(arr);
</script>
- .pop() 获取数组中最后一个元素
- .push(“元素值”) 把 元素值 放到数组的 最后的位置
- .unshift(“元素值”) 把元素值放到数组的第一个位置
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var arr = [10, 20, 30, 40, 50];
//删除数组中第一个元素,返回值是要删除的那个元素值
// console.log(arr.shift());
//追加到数组的最后
// console.log(arr.push(arr.shift()));
// console.log(arr.push(arr.shift()));
// console.log(arr.push(arr.shift()));
// console.log(arr.push(arr.shift()));
// console.log(arr.push(arr.shift()));
// console.log(arr);
// 把最后一个元素放到数组的第一个位置
arr.unshift(arr.pop())
arr.unshift(arr.pop())
arr.unshift(arr.pop())
arr.unshift(arr.pop())
arr.unshift(arr.pop())
console.log(arr);
</script>
</body>
</html>
demo地址
