<!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>
為什么這個不能運行？瀏覽器也沒有報錯錯在哪里了？
前端大萌新
2016-10-04 20:43:12
