妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 924|回复: 1

[求助] 鼠标经过图片以中心为原点放大抖动BUG 求助

[复制链接]
孤独暗夜 发表于 2016-8-7 19:07:06 | 显示全部楼层 |阅读模式
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>pyh 多图片展开和收缩</title>
        <style>
        body{padding:0;margin:0;}
        ul,li{padding:0;margin:0;list-style: none;}
        #ul1{width: 366px;height:300px;margin:200px auto;position: relative;}
        li{width:100px;height:100px;float:left;margin: 10px; }
        img{width:100px;height:100px;border: none;vertical-align: top;}
        </style>
</head>
<script>
        window.onload=function(){
                var oUl=document.getElementById('ul1');
                var aLi=oUl.getElementsByTagName('li');
                var aImg=oUl.getElementsByTagName('img');
                var minZindex=1;
                //布局转换
                for(var i=0;i<aLi.length;i++){
                        aLi[i].style.left=aLi[i].offsetLeft+'px';
                        aLi[i].style.top=aLi[i].offsetTop+'px';                       
                }
                for(var i=0;i<aLi.length;i++){       
                        aLi[i].style.margin=0;
                        aLi[i].style.position='absolute';
                }
                //从中间变大
                for(var i=0;i<aLi.length;i++){
                        aLi[i].index=i;
                        aLi[i].onmouseover=function(){
                                this.style.zIndex=minZindex++;
                                startMove(this,{marginTop:-50,marginLeft:-50})
                                startMove(aImg[this.index],{width:200,height:200})
                        }
                        aLi[i].onmouseout=function(){
                               
                                startMove(this,{marginTop:0,marginLeft:0})

                                startMove(aImg[this.index],{width:100,height:100})
                        }
                }
                //获取元素属性
                function getStyle(obj,attr){
                        return obj.currentStyle? obj.currentStyle[attr]:getComputedStyle(obj,false )[attr];
                }

                // 完美运动框架       
                function startMove(obj,json,fn){
                        clearInterval(obj.timer);
                        var bStop=true;
                        obj.timer=setInterval(function(){
                                for(var attr in json){
                                        var iCur=0;
                                        if(attr=='opacity'){
                                                iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
                                        }else{
                                                iCur=parseInt(getStyle(obj,attr));       
                                        }
                                        var iSpeed=(json[attr]-iCur)/8;
                                        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                                        //判断是否每个值都走到目标点
                                        if(iCur!==json[attr]){
                                                bStop=false;
                                        }else{
                                                bStop=true;
                                        }
                                        if(attr=='opacity'){
                                                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                                                obj.style.opacity=(iCur+iSpeed)/100;

                                        }else{
                                                obj.style[attr]=iCur+iSpeed+'px';
                                        }
                                }
                                if(bStop){
                                        clearInterval(obj.timer)
                                        if (fn){
                                                fn();
                                        }
                                }
                        },30)
                }
        }
</script>
<body>
        <ul id="ul1">
                <li><img src="img/1.jpg"></li>
                <li><img src="img/2.jpg"></li>
                <li><img src="img/3.jpg"></li>
                <li><img src="img/4.jpg"></li>
                <li><img src="img/5.jpg"></li>
                <li><img src="img/6.jpg"></li>
                <li><img src="img/1.jpg"></li>
                <li><img src="img/2.jpg"></li>
                <li><img src="img/3.jpg"></li>
        </ul>
</body>
</html>

显示的时候,会有抖动BUG,想了一天不知道怎么解决这个BUG,请老师同学帮忙看看,万分感谢!!!




运动 pyh 多图片展开和收缩(图片从中心展开显示、布局转换).rar

256.02 KB, 下载次数: 179

回复

使用道具 举报

849800875 发表于 2016-9-22 20:12:51 | 显示全部楼层
换一个运动框架,用时间版的框架。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-1-16 16:43 , Processed in 0.121994 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表