<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>at the same time to move</title>
<style>
#li1{
width: 200px;
height: 100px;
border: 3px solid black;
opacity: 0.3;
background-color: yellow;
list-style: none;
}
</style>
<script>
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;//标志所有运动是否到达目标值
for(var attr in json){
var curr=0;
//判断是否为透明度
if(attr=='opacity'){
curr=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
curr=parseInt(getStyle(obj,attr));
}
//移动速度处理
var speed=0;
speed=(json[attr]-curr)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(curr!=json[attr]){
flag=false;
}
if (attr=='opacity') {
obj.style.filter='alpha(opacity:'+(curr+speed)+")";
obj.style.opacity=(curr+speed)/100;
}else{
obj.style[attr]=curr+speed+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
//取样式
function getStyle(obj,attr){
if(obj.currentStyle){ //IE取样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,null)[attr];
}
}
window.onload=function(){
var Li=document.getElementById('li1');
Li.onmouseover=function(){
startMove(Li,{width:400,height:200,opacity:100});
}
Li.onmouseover=function(){
startMove(Li,{width:200,height:100,opacity:30});
}
};
</script>
</head>
<body>
<ul>
<li id='li1'></li>
</ul>
</body>
</html>
1 回答
已采纳
业余奶茶品鉴师
TA贡献260条经验 获得超388个赞
window.onload=function(){
var Li=document.getElementById('li1');
Li.onmouseover=function(){
startMove(Li,{width:400,height:200,opacity:100});
}
Li.onmouseout=function(){
startMove(Li,{width:200,height:100,opacity:30});
}
};你两个都写成Li.onmouseover 了。改成上面那样就行。望采纳
添加回答
举报
0/150
提交
取消