代碼有問題，達不到設置的width和height,幫忙看看好嗎
<!DOCTYPE html>
<html>
<head>
?? ?<title>同時運動</title>
?? ?<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
?? ?<style type="text/css">
?? ?*{
?? ??? ?margin: 0;
?? ??? ?padding: 0;
?? ?}
?? ?ul,li{
?? ??? ?list-style: none;
?? ?}
?? ?ul li{
?? ??? ?width:200px;
?? ??? ?height:100px;
?? ??? ?background: yellow;
?? ??? ?margin-bottom: 20px;
?? ??? ?filter:alpha(opacity:30);
?? ??? ?opacity: 0.3;
?? ??? ?border:1px solid #000;
?? ?}
?? ?</style>
?? ?<script type="text/javascript">
?? ??? ?window.onload=function(){
?? ??? ??? ?var Li = document.getElementById('li1');
?? ??? ??? ?Li.onmouseover=function(){
?? ??? ??? ??? ?startMove(Li,{width:300,height:200,opacity:100});
?? ??? ??? ?}
?? ??? ??? ?Li.onmouseout=function(){
?? ??? ??? ??? ?startMove(Li,{width:200,height:100,opacity:30});
?? ??? ??? ? }
?? ??? ?}
?? ??? ?function startMove(obj,json,fn){
?? ??? ?clearInterval(obj.timer);
?? ??? ?obj.timer = setInterval(function(){
?? ??? ??? ?var flag = true;
?? ??? ??? ?for(var i in json){
?? ??? ??? ??? ?//1.取當前的值
?? ??? ??? ??? ?var icur = 0;
?? ??? ??? ??? ?if(i == 'opacity'){
?? ??? ??? ??? ??? ?icur = Math.round(parseFloat(getStyle(obj,i))*100);
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?icur = parseInt(getStyle(obj,i));
?? ??? ??? ??? ?}
?? ??? ??? ??? ?//2.算速度
?? ??? ??? ??? ?var speed = (json[i]-icur)/10;
?? ??? ??? ??? ?speed = speed >0?Math.ceil(speed):Math.floor(speed);
?? ??? ??? ??? ?//3.檢測停止
?? ??? ??? ??? ?if(icur != json[i]){
?? ??? ??? ??? ??? ?flag = false;?? ?
?? ??? ??? ??? ??? ?//alert(flag);
?? ??? ??? ??? ??? ?if(i == 'opacity'){
?? ??? ??? ??? ??? ??? ?obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
?? ??? ??? ??? ??? ??? ?obj.style.opacity = (icur+speed)/100;?? ??? ?
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?obj.style[i] = icur + speed + 'px';
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?flag = true;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ?}//for結(jié)束?? ?
?? ??? ??? ?if(flag){
?? ??? ??? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ??? ??? ?//fn是回調(diào)函數(shù)
?? ??? ??? ??? ??? ?if(fn){
?? ??? ??? ??? ??? ??? ?fn();
?? ??? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?},30);
?? ?
}
?? ??? ?
function getStyle(obj,attr){
?? ?if(obj.currentStyle){
?? ??? ?return obj.currentStyle[attr];
?? ?}else{
?? ??? ?return getComputedStyle(obj,false)[attr];
?? ?}
?? ?//return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
?? ?</script>
</head>
<body>
?? ?<ul>
?? ??? ?<li id='li1'></li>?? ??? ?
?? ?</ul>
</body>
</html>
2016-03-07
不該在遍歷內(nèi)添加flag?=?true;的，假設有兩個CSS屬性，第一個icur != json[i] ?這時flag?=false，但是到第二個屬性時如果icur == json[i]，此時flag?=?true，將第一個false覆蓋。所以不能達到想要的效果
2016-03-01
嗯，你的改法就是老師的講法，這個我是懂的，我上面的代碼，打開調(diào)試每次width或者height的像素都達不到想要的，也想不太明白
2016-02-28
你的問題我仔細看了看，算是自己復習一下運動框架。把你的代碼在瀏覽器里跑了一下發(fā)現(xiàn)透明度沒有問題，寬度和高度有兩個像素差別，你的icur取值沒有問題說明是在json循環(huán)里有問題，
//3.檢測停止 ????????????????if(icur?!=?json[i]){ ????????????????????flag?=?false;???? ????????????????????//alert(flag); ????????????????????if(i?==?'opacity'){ ????????????????????????obj.style.filter?=?'alpha(opacity:'+(icur+speed)+')'; ????????????????????????obj.style.opacity?=?(icur+speed)/100;???????? ????????????????????}else{ ????????????????????????obj.style[i]?=?icur?+?speed?+?'px'; ????????????????????} ????????????????}else{ ????????????????????flag?=?true; ????????????????} ???????????????? ???????????????? ???????????????? ????????????}//for結(jié)束問題出在這兒，你把
????????????????if(i?==?'opacity'){ ??????????????????????????obj.style.filter?=?'alpha(opacity:'+(icur+speed)+')'; ????????????????????????obj.style.opacity?=?(icur+speed)/100;???????? ????????????????????}else{ ????????????????????????obj.style[i]?=?icur?+?speed?+?'px'; ????????????????????}放在了if(icur != json[i])判斷中，道理其實我似懂非懂，你可以按著邏輯來自己想一下，不過最后的結(jié)果是改為一下的代碼就好了：
if(icur?!=?json[i]){ ????????????????????flag?=?false;???? ????????????????????}; ????????????????????if(i?==?'opacity'){ ????????????????????????obj.style.filter?=?'alpha(opacity:'+(icur+speed)+')'; ????????????????????????obj.style.opacity?=?(icur+speed)/100;???????? ????????????????????}else{ ????????????????????????obj.style[i]?=?icur?+?speed?+?'px'; ????????????????????} ????????????}//for結(jié)束