CSS部分
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 1150px;
height: 400px;
border: 1px solid silver;
margin: 200px auto;
overflow: hidden;
}
ul{
list-style: none;
}
ul li{
width: 240px;
height: 400px;
float: left;
}
#box ul{
width: 1300px;
}
</style>
html部分
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
JS部分
<script type="text/javascript">
var box=document.getElementById("box");
var arr=document.getElementsByTagName("li");
for(i=0;i<arr.length;i++){
arr[i].style.background="url(img/"+(i+1)+".jpg) no-repeat";
arr[i].onmouseover=function(){
for(j=0;j<arr.length;j++){
animate(arr[j],{"width":100});
}
animate(this,{"width":800});
}
}
box.onmouseout=function(){
for(j=0;j<arr.length;j++){
animate(arr[j],{"width":240});
}
}
</script>
用到的運動封裝函數(shù)：
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
//參數(shù)變?yōu)?個
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.清除定時器
//判斷: 目標值和當前值的差大于步長，就不能跳出循環(huán)
//不考慮小數(shù)的情況：目標位置和當前位置不相等叽讳，就不能清除清除定時器憔四。
if(json[k] !== leader){
bool = false;
}
}
console.log(1);
//只有所有的屬性都到了指定位置，bool值才不會變成false；
if(bool){
clearInterval(ele.timer);
//所有程序執(zhí)行完畢了，現(xiàn)在可以執(zhí)行回調(diào)函數(shù)了
//只有傳遞了回調(diào)函數(shù)，才能執(zhí)行
if(fn){
fn();
}
}
},1);
}
