首页新闻找找看学习计划

为什么js特效放大镜的坐标不一致?帮我分析一下。谢谢

0
[待解决问题]

鼠标在上面的小图上快速拖动的时候,超出范围后,为什么大图的坐标值不是0呢 ?
每次光标在小图上快速来回,大图的坐标值都一样的。只有缓慢的移动光标才能正常的到0,有什么办法解决?

另外,为什么拖动的时候。小图的光标位置,却不是在大图的中心位置上?
意思就是说每次拖动都想让放大的部分在大图的框的中心显示

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <style type="text/css">
        *{margin:0;padding:0;}
        body{background: #000}
        li,ul{ list-style:none outside none; }
        .viewWindow{ width:200px;height:200px;margin:15px auto; background: orange}
        .large{ width:200px;height:200px;overflow:hidden;margin:0 auto;position: relative; }
        #largeImg{ position: absolute;top:0;left:0;width:1024px;height: 768px;background: red; }

    </style>

</head>
<body>
    
    <div class="viewWindow">
        <img src="http://ww2.sinaimg.cn/mw690/71e47b6bgw1e8vq53zrrdj20xc1e0e61.jpg" width="200" height="200" alt="">    
    </div>

    <div class="large">
        <img src="http://ww2.sinaimg.cn/mw690/71e47b6bgw1e8vq53zrrdj20xc1e0e61.jpg" alt="" id="largeImg" width="690" height="1035">
    </div>

    <script type="text/javascript">

        function log(val){
            return console.log(val);
        }

        var v = $(".viewWindow");
        var l = $(".large");
        var i = $("#largeImg");

        var sum = i.height() - l.height();
        var rate = sum/v.height();

        var sumw = i.width() - l.width();
        var ratew = sumw/v.width();

        v.bind("mouseover",function(){
            $(document).bind("mousemove",move)
        })

        v.bind("mouseout",function(){
            $(document).unbind("mousemove");
        })

        function move(event){
            console.log((event.clientX)-v.offset().left)
            $("#largeImg").css("left",((event.clientX)-v.offset().left)*-ratew)
            $("#largeImg").css("top",((event.clientY)-v.offset().top)*-rate)
        }

    </script>

</body>
</html>
深蓝色梦想的主页 深蓝色梦想 | 初学一级 | 园豆:6
提问于:2013-11-03 01:01
< >
分享
所有回答(2)
0

不知道lz在哪个浏览器下测试的,我是用chrome没有问题,我也试了快速滑过,没有问题。

袁家小黑球 | 园豆:1045 (小虾三级) | 2013-11-04 09:42
0

mousemove事件是有时间间隔的, 比如说5ms, 不是一直触发的, 而且浏览器之间可能会有差异;

也就是说, 你最后一次触发mousemove事件, 鼠标还没有移到图片的边缘, 比如说还差5像素;

然后你继续移动, 移出了图片的范围, 但是已经没有机会触发下一次mousemove事件,

可以判断"越界", 然后手动设置0或者其他数值;

 

第二个问题, 需要修改计算方式;

  1 计算百分比 w% h%

  2 计算缩放比 大图/小图

  3 得到大图的 left top, *取反*

  4 left加上大图外部容器的 W/2, top + H/2, 就可以居中

..当然将大图改成div的背景, 效率会好点.

积跬步 | 园豆:214 (菜鸟二级) | 2013-11-15 12:01

计算的公式发来看看,

为什么改为背景效率会好?

支持(0) 反对(0) 深蓝色梦想 | 园豆:6 (初学一级) | 2013-11-15 15:07

@深蓝色梦想: 你这边提高效率最直接的办法就是缓存DOM(缓存操作的元素);

  你至少多加了一个元素, 用背景的话, 不需要额外的元素.

支持(0) 反对(0) 积跬步 | 园豆:214 (菜鸟二级) | 2013-11-16 10:33

@积跬步: 还是 不懂啊 

支持(0) 反对(0) 深蓝色梦想 | 园豆:6 (初学一级) | 2013-11-19 09:35
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册