<style?type="text/css">
*{
margin:0;
padding:0;}
ul,li{
list-style:none;}
ul?li{
width:200px;
height:100px;
background:yellow;
margin-bottom:20px;
border:4px?solid?#000;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script?src="move.js"></script>
<script>
window.onload=function(){
var?Li=document.getElementById('li1');
Li.onmouseover=function(){
startMove(Li,'width',400,function(){
startMove(Li,'height',200,function(){
startMove(Li,'opacity',100);
});
});
}
Li.onmouseout=function(){
startMove(Li,'opacity',30,function(){
startMove(Li,'height',100,function(){
startMove(Li,'width',200);
});
});
}
}
</script>
move.js
?function?getStyle(obj,attr){
if(obj.currentStyle){
return?obj.currentStyle[attr];
}
else{
return?getComputedStyle(obj,false)[attr];
}
}
//var?timer=null;
function?startMove(obj,attr,iTarget,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//1.取當(dāng)前的值?
var?icur=0;
if(icur=='opacity'){
icur=Math.round(parseFloat(getStyle(obj.attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
?//2.算速度
var?speed=(iTarget-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//3.檢測(cè)停止
if(iTarget==icur){
clearInterval(obj.timer);
??if(fn){
??fn();
??}
}
????else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}
else{
obj.style[attr]=icur+speed+'px';
}
}
},30)
}
2015-11-26
html 呢？
2015-11-26
<!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?{ ????????????width:?200px; ????????????height:?100px; ????????????background:?yellow; ????????????margin-bottom:?20px; ????????????border:?4px?solid?#000; ????????????filter:?alpha(opacity:30); ????????????opacity:?0.3; ????????} ????</style> ????<script> ????????function?getStyle(obj,?attr)?{ ????????????if?(obj.currentStyle)?{ ????????????????return?obj.currentStyle[attr]; ????????????} ????????????else?{ ????????????????return?getComputedStyle(obj,?false)[attr]; ????????????} ????????} ????????//var?timer=null; ????????function?startMove(obj,?attr,?iTarget,?fn)?{ ????????????clearInterval(obj.timer); ????????????obj.timer?=?setInterval(function?()?{ ????????????????//1.取當(dāng)前的值 ????????????????var?icur?=?0; ????????????????if?(attr?==?'opacity')?{//看這里 ????????????????????icur?=?Math.round(parseFloat(getStyle(obj,attr))?*?100);?//看這里 ????????????????}else?{ ????????????????????icur?=?parseInt(getStyle(obj,?attr)); ????????????????} ????????????????//2.算速度 ????????????????var?speed?=?(iTarget?-?icur)?/?8; ????????????????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed); ????????????????//3.檢測(cè)停止 ????????????????if?(iTarget?==?icur)?{ ????????????????????clearInterval(obj.timer); ????????????????????if?(fn)?{ ????????????????????????fn(); ????????????????????} ????????????????}else?{ ????????????????????if?(attr?==?'opacity')?{ ????????????????????????obj.style.filter?=?'alpha(opacity:'?+?(icur?+?speed)?+?')'; ????????????????????????obj.style.opacity?=?(icur?+?speed)?/?100; ????????????????????????console.log(obj.style.opacity); ????????????????????}else?{ ????????????????????????obj.style[attr]?=?icur?+?speed?+?'px'; ????????????????????} ????????????????} ????????????},?30) ????????}; ????????window.onload?=?function?()?{ ????????????var?Li?=?document.getElementById('li1'); ????????????Li.onmouseover?=?function?()?{ ????????????????startMove(Li,?'width',?400,?function?()?{ ????????????????????startMove(Li,?'height',?200,?function?()?{ ????????????????????????startMove(Li,?'opacity',?100); ????????????????????}); ????????????????}); ????????????} ????????????Li.onmouseout?=?function?()?{ ????????????????startMove(Li,?'opacity',?30,?function?()?{ ????????????????????startMove(Li,?'height',?100,?function?()?{ ????????????????????????startMove(Li,?'width',?200); ????????????????????}); ????????????????}); ????????????} ????????} ????</script> </head> <body> <ul> ????<li?id="li1"></li> </ul> </body> </html>修改后的代碼 ，自己對(duì)應(yīng)著看。