<!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多個(gè)參數(shù)的定義*/
????????{
????????????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>
透明度變化問(wèn)題，應(yīng)該是鼠標(biāo)移動(dòng)變不透明，移開(kāi)變0.3透明度，可是不知道哪的問(wèn)題
慕府戲子
2016-08-01 20:25:59
