鼠标移入第一个图片，然后快速移动第二个图片，为什么会抖了一下，肿么解决？？

悬赏园豆：10 [待解决问题]

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>131游戏之家</title>
    <style>
        body{
            margin:0;
            padding:0;
            font:12px/24px "microsoft yahei";
        }
        h1,h2,h3,h4,h5,h6{
            padding: 0;
            margin:0;
        }
        ul,li{
            padding:0;
            margin:0;
            list-style:none;
        }
        img{border:none}
        .channel{
            float:left;
            margin-bottom:10px;
            width:1000px;
        }
        .channel .title{
            border-bottom:3px solid #2497d7;
            color:#2497d7;
            width:100%;
        }
        .topImg{
            padding:0;
            position:relative;
            width:980px;
            overflow:hidden;
            z-index:1;
        }
        .topImg ul{
            overflow: hidden;
            position:relative;
            z-index:1;
        }
        .topImg li{
            display:inline;
            float: left;
            margin-right:8px;
            width:180px;
            height:300px;
            border:5px solid #0f1d2b;
            overflow:hidden;
            position:static;
        }
        .topImg li.last{
            margin-right:0;
        }
        a.hg{
            display:block;
            position:absolute;
            left:0;
            top:0;
            z-index: 2;
            width:0;
            height:310px;
            overflow:hidden;
        }
        div.hg{
            width:190px;
            height:320px;
            position:absolute;
            overflow:hidden;
            background:#fff;
            left:0;
            top:-320px;
            z-index:3;
        }
    </style>

</head>
<body>
<div class="channel">
    <div class="title"><h2>今日重点</h2></div>
    <div class="topImg">
        <ul id="ul1">
            <li>
                <a href=""><img src="http://res.files.131.com/channel/131com_2013/images/index02.jpg"></a>
                <div class="hg">
                    <h3>腾讯光速工作室精心研发的Q版iOS手游《斗三国》，是一款SLG&RPG类的移动终端网络游戏。</h3>
                    <p>腾讯光速工作室精心研发的Q版iOS手游《斗三国》，是一款SLG&RPG类的移动终端网络游戏。游戏以三国题材为背景，打造出数百人军团实时冲锋对阵的战场核心玩法，为玩家带来流畅、激烈、爽快的触摸战斗新体验。</p>
                </div>
            </li>
            <li>
                <a href=""><img src="http://res.files.131.com/channel/131com_2013/images/index02.jpg"></a>
                <a href="" class="hg"><img src="http://res.files.131.com/channel/131com_2013/images/c15.jpg"></a>
            </li>
            <li>
                <a href=""><img src="http://res.files.131.com/channel/131com_2013/images/index02.jpg"></a>
                <div class="hg">
                    <h3>腾讯光速工作室精心研发的Q版iOS手游《斗三国》，是一款SLG&RPG类的移动终端网络游戏。</h3>
                    <p>腾讯光速工作室精心研发的Q版iOS手游《斗三国》，是一款SLG&RPG类的移动终端网络游戏。游戏以三国题材为背景，打造出数百人军团实时冲锋对阵的战场核心玩法，为玩家带来流畅、激烈、爽快的触摸战斗新体验。</p>
                </div>
            </li>
            <li>
                <a href=""><img src="http://res.files.131.com/channel/131com_2013/images/index02.jpg"></a>
                <a href="" class="hg"><img src="http://res.files.131.com/channel/131com_2013/images/c15.jpg"></a>
            </li>


        </ul>
    </div>
</div>
<script type="text/javascript">
    window.onload=function(){
        var aUl=document.getElementById('ul1');
        var aLi=aUl.getElementsByTagName('li');
        var hg=getByClass(aUl,'hg');
        var oneHeight=aLi[0].offsetHeight+10;
        var oneWidth=hg[0].offsetHeight;
        var i=0;
        var iNow=0;
        var timer=null;
        for(i=0; i<aLi.length;i++){

            aLi[i].aMove=null;
            aLi[i].timer=null;
            aLi[i].aOff=true;
            aLi[i].index=i;

            hg[i].style.width='auto';
            aLi[i].bTarge=hg[i].offsetWidth;
            hg[i].style.width=0;

            aLi[i].onmouseover=function(){        //移 入
                var Img=this.getElementsByTagName('img');
                iNow=this.index;
                if(Img.length>1){
                    clearInterval(this.aMove);
                    if(this.aOff){
                        this.aOff=false;
                        startMove(hg[iNow],{width:990});
                        this.aOff=true;
                    }
                }else{
                    clearInterval(this.aMove);
                    if(this.aOff){
                        this.aOff=false;
                        this.style.position='relative';
                        hg[iNow].style.width='190px';
                        hg[iNow].style.backgroundColor='#fff';
                        startMove(hg[iNow],{top:0});
                        this.aOff=true;
                    }
                }
            };

            aLi[i].onmouseout=function(){        //移 出
                var Img=this.getElementsByTagName('img');
                iNow=this.index;
                    if(Img.length>1){
                        startMove(hg[iNow],{width:0});
                    }else{
                        startMove(hg[iNow],{top:-oneHeight},function(){
                            aLi[iNow].style.position='static';
                            hg[iNow].style.width='0';
                        });
                    }
            };

        };

    };

    function getByClass(elem,cls){    //通过类名获取元素
        var aEle=elem.getElementsByTagName('*');
        var reClass=new RegExp(''+cls+'');
        var aResult=[];

        for(var i=0;i<aEle.length;i++){
            if(reClass.test(aEle[i].className)){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }

    function getStyle(obj,attr){    //获取元素样式
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
    }

    function startMove(obj,json,fn){ //运动框架
        var timer=obj.timer;
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){

            var iFog=true;
            for(var attr in json){
//1.取值
                var iCur=0;
                if(attr=='opacity'){
                    if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
                        iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
                    }else{
                        iCur=Math.round(parseFloat(getStyle(obj,attr))*100)||100;
                    }
                }else{
                    iCur=parseInt(getStyle(obj,attr))||0;
                }
//2.计算速度
                var iSpeed=(json[attr]-iCur)/4;
                iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测值是否达到目标值

                if(iCur!=json[attr]){
                    iFog=false;
                }
                if(attr=='opacity'){
                    obj.style.opacity=(iCur+iSpeed)/100;
                    obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                }else{
                    obj.style[attr]=iCur+iSpeed+'px';
                }

                if(iFog){
                    clearInterval(obj.timer);
                    if(fn)fn();
                }
            }
        },30)
    }
</script>
</body>
</html>

js jq 运动 php

谭小鱼 | 初学一级 | 园豆：86
提问于：2013-07-26 10:01

< >

所有回答(2)

楼主视力太好了

在大地画满窗子 | 园豆：102 (初学一级) | 2013-07-26 15:13

我和我的小伙伴都同意你的看法

支持(0) 反对(0) 八戒的师傅 | 园豆：1472 (小虾三级) | 2013-07-29 11:58

那个事件执行了两次

小兵仔 | 园豆：1240 (小虾三级) | 2013-07-26 15:18

噢噢，怎么解决才好

支持(0) 反对(0) 谭小鱼 | 园豆：86 (初学一级) | 2013-07-29 09:19

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

鼠标移入第一个图片，然后快速移动第二个图片，为什么会抖了一下，肿么解决？？

欢迎，请先登录或者注册。