<style>
ul {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
div {
1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
240px;
height: 400px;
float: left;
}
div ul {
1300px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="../DOM/commer.js"></script>
<script>
//计算后的样式属性---- 一个元素的任意的一个样式属性值
function getStyle(element,attr) {
//判断这个浏览器是否支持这个方法
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
//匀速动画
function animate(element,json,fn) { //element--元素 attr--属性名字 target--目标位置
//清理定时器
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true;//默认，假设，全部到达目标
for(var attr in json){
//判断这个属性中attr中是不是opacity
if (attr=="opacity"){
//获取元素的当前的透明度，当前的透明度放大100倍
var current=getStyle(element,attr)*100;
//目标的透明度放大100倍
var target=json[attr]*100;
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current/100;
}else if(attr=="zIndex"){ //判断这个属性attr中是不是zIndex
//层级改变就是直接改变这个属性的值
element.style[attr]=json[attr];
}else {
//获取元素当前位置
var current=parseInt(getStyle(element,attr));//数字类型
//当前的属性对应的目标值
var target=json[attr];
//移动的步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";
}
//判断是否到达目标
if(current!=target){
flag=false;
}
}
if(flag){
//清理计时器
clearInterval(element.timeId);
//回调函数,所有属性达到目标后才能使用
if(fn){
fn();
}
}
//测试代码
console.log("目标位置:"+target+",当前位置:"+current+",每次移动的步数:"+step)
},20);
}
var liObj=ver("box").getElementsByTagName("li");
for(var i=0;i<liObj.length;i++){
liObj[i].style.backgroundImage="url(imgs/images/"+(i+1)+".jpg)";
//鼠标进入
liObj[i].onmouseover=mouseoverHandle;
//鼠标离开
liObj[i].onmouseout=mouseoutHandle;
}
function mouseoverHandle() {
for(var j=0;j<liObj.length;j++){
animate(liObj[j],{"width":100});//动画效果
}
animate(this,{"width":800});
}
function mouseoutHandle() {
for(var j=0;j<liObj.length;j++){
animate(liObj[j],{"width":240});
}
}
</script>