改了以后還是有到不了目標屬性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{ margin:0; padding:0}
ul,li{ list-style:none}
ul li{
??
? background:#FF0;
? width:200px;
? height:100px;
? border:4px solid #F0F;
? margin-bottom:10px;
? filter:alpha(opacity:30);
? opacity:0.3;
? }
?
</style>
</head>
<script ?src="JS/move.js"></script>
<script>
window.onload=function(){
? ? ? ? ? ?var oli=document.getElementById('a');
oli.onmouseover=function(){
startMove(oli,
{'width':400,'height':200,
'opacity':100});
}
oli.onmouseout=function(){
startMove(oli,
{'width':200,'height':100,
'opacity':30});
}
}
</script>
<body>
? ?<ul>
? ? ?<li id="a"></li>
? ? ?
? ? ?
? ? </ul>
</body>
</html>
move.js
// JavaScript Document ? oli[i].timer=null; oli[i].alpha=30;
function getStyle(obj,attr){
? ? ? ?if(obj.currentStyle){
? ? ? return obj.currentStyle[attr];
? ? ? ? ?}
? ? ? else{
? ? ? return getComputedStyle(obj,false)[attr];
? ? ? ? ?}
? ? }
function startMove(obj,json,fn){//iTarget目標值
? ?
? ?clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json ){
var flag=true;//假設所有運動到達終點
var sty=0;
? ? ? ?if(attr=='opacity'){
?sty=Math.round(parseFloat(getStyle(obj,attr))*100);
? }else{
?sty=parseInt(getStyle(obj,attr));
? }
//算速度 ??
? ?var speed=(json[attr]-sty)/8;
? speed=speed>0?Math.ceil(speed):Math.floor(speed);
??
?
//檢測停止
if(sty!=json[attr])
?{
?
? ? ? flag=false;
?}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(sty+speed)+')';
obj.style.opacity=(sty+speed)/100;
}
else{
? ? ? obj.style[attr]=sty+speed+'px';
}
? ? ?}
? if(flag){
?clearInterval(obj.timer);
? if(fn){
? fn();
? }
? }
},30)
}
2016-03-27
。。改好了