<!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>
????????????*{margin:0;?padding:0;}
????????????div?ul?li{
????????????????margin-bottom:20px;
????????????????width:200px;height:50px;
????????????????background-color:#FF0;
????????????????border:1px?solid?black;
????????????????opacity:0.3;
????????????????filter:alpha(opacity:30);
????????????????list-style-type:none;
????????????}
????????</style>
????????<script>
????????????window.onload=function(){
????????????????var?li=document.getElementsByTagName('li');
????????????????for(var?i=0;?i<li.length;?i++){
????????????????????li[i].onmouseover=function(){
????????????????????????var?_this=this;
????????????????????????//利用json將屬性和值兩項合在一起
????????????????????????move(_this,{"width":"400","height":"100"},function(){
????????????????????????????move(_this,{"opacity":"100"});
????????????????????????});
????????????????????}
????????????????????/*調(diào)用的函數(shù)有3個參數(shù)，this表示object即當前所選對象，json為所選屬性要達到的目標值，fu（）表示鏈接動作。*/
????????????????????li[i].onmouseout=function(){
????????????????????????var?_this=this;
????????????????????????move(_this,{"width":"200","height":"50"},function(){
????????????????????????????move(_this,{"opacity":"30"});
????????????????????????});
????????????????????}
????????????????}
????????????????//通過getstyle解決邊框BUG，并考慮兼容性
????????????????function?getStyle(obj,attr){
????????????????????if(obj.currenStyle){
????????????????????????return?obj.currenStyle[attr];
????????????????????}
????????????????????else{
????????????????????????return?getComputedStyle(obj,false)[attr];
????????????????????}
????????????????}
????????????????function?move(obj,json,fn){
????????????????????clearInterval(obj.timer);
????????????????????obj.timer=setInterval(function(){
????????????????????????//第一步取當前值
????????????????????????for(var?attr?in?json){
????????????????????????????var?iCur=0;
????????????????????????????if(attr=='opacity'){
????????????????????????????????/*如果當前值為透明度（無單位，并且為小數(shù)），需要用parseFloat去小數(shù)，再用Math.round四舍五入取整來修正BUG*/
????????????????????????????????iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
????????????????????????????}else{
????????????????????????????????iCur=parseInt(getStyle(obj,attr));
????????????????????????????}
????????????????????????????//第二步??求速度
????????????????????????????var?speed=(json[attr]-iCur)/10;
????????????????????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????????????????????????????//第三步?運動過程
????????????????????????????if(iCur!=json[attr]){
????????????????????????????????//如果不是所有目前值達到目標值，標簽不成立，繼續(xù)進行運動
????????????????????????????????flag=false;
????????????????????????????}
????????????????????????????if(attr=='opacity'){
????????????????????????????????//透明度無單位px，所以單獨列出并考慮兼容
????????????????????????????????obj.style.filter='alpha(opacity:'+(iCur+speed)+')';
????????????????????????????????obj.style.opacity=(iCur+speed)/100;
????????????????????????????}else{
????????????????????????????????obj.style[attr]=iCur+speed+'px';
????????????????????????????}
????????????????????????????if(flag){
????????????????????????????????clearInterval(obj.timer);
????????????????????????????????if(fn){
????????????????????????????????????fn();
????????????????????????????????}
????????????????????????????}
????????????????????????}//json
????????????????????},30);
????????????????}
????????????}
????????</script>
????</head>
????
????<body>
????????<div?id='x'>
????????????<ul>
????????????????<li?id='a'></li>
????????????????<li?id='b'></li>
????????????</ul>
????????</div>
????</body>
</html>
2016-04-20
可以的，只要放在setInterval里就可以
2016-05-13
看了 ?你的代碼 ?終于解決了我的問題 ?你這個 ?var _tihs=this ? 跟誰學的。。。??
2016-04-20
flag放到for-in循環(huán)里面就可以了
2016-04-20
找到了，flag初值莫名其妙刪掉了