为什么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>
所有回答(2)
0
不知道lz在哪个浏览器下测试的，我是用chrome没有问题，我也试了快速滑过，没有问题。
0
mousemove事件是有时间间隔的, 比如说5ms, 不是一直触发的, 而且浏览器之间可能会有差异;
也就是说, 你最后一次触发mousemove事件, 鼠标还没有移到图片的边缘, 比如说还差5像素;
然后你继续移动, 移出了图片的范围, 但是已经没有机会触发下一次mousemove事件,
可以判断"越界", 然后手动设置0或者其他数值;
第二个问题, 需要修改计算方式;
1 计算百分比 w% h%
2 计算缩放比 大图/小图
3 得到大图的 left top, *取反*
4 left加上大图外部容器的 W/2, top + H/2, 就可以居中
..当然将大图改成div的背景, 效率会好点.
计算的公式发来看看,
为什么改为背景效率会好?
@深蓝色梦想: 你这边提高效率最直接的办法就是缓存DOM(缓存操作的元素);
你至少多加了一个元素, 用背景的话, 不需要额外的元素.
@积跬步: 还是 不懂啊
