<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;
padding: 0;
}
ul{
list-style: none;position: fixed ;top: 20%;
}
ul li {
width:200px;
height: 100px;
background:#5a5a5a;
margin-bottom: 20px;
opacity:0.3;
}
</style>
<script>
window.onload = function()
{
var Li1=document.getElementById('id1');
var Li2=document.getElementById('id2');
Li2.onmousemove=function(){
startMove(this,{'width':400,'opacity':100})
}
Li2.onmouseout=function(){
startMove(this,{'width':200,'opacity':30})
}
}
//var timer= null;
function startMove(obj,json,fn)/*obj多个参数的定义*/
{
clearInterval(obj.timer);
var a=true;
obj.timer = setInterval(function(){
for(var attr in json) {
var icur=0;
if(attr=='opacity'){
icur=parseInt(getstyle(obj, attr))*100
}else {icur=parseInt(getstyle(obj, attr))}
var speed = (json[attr] - icur) / 3;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (icur!= json[attr])
{
a=false;
if(attr=='opacity'){
obj.style['opacity']=(icur+speed)/100;
}
else {obj.style[attr] = icur + speed + 'px';}
}
}
if(a){
clearInterval(obj,timer);
if(fn){fn();}
}
},30)}
function getstyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]
}
else {
return getComputedStyle(obj,false)[attr]
}
}
</script>
</head>
<body>
<ul>
<li id="id1">11</li>
<li id="id2">22</li>
<li id="id3"></li>
</ul>
</body>
</html>
添加回答
举报
0/150
提交
取消