+ -
当前位置:首页 → 问答吧 → 图片放大镜深沉问题,高手进!

图片放大镜深沉问题,高手进!

时间:2011-09-30

来源:互联网

想得到和淘宝商品详情页完全一样的放大镜效果

千万不要推荐 jqzoom 和 magnify 这等插件,都有BUG


必须考虑到图片需要完全居中,商品图片不全是正方形,有宽有窄,触发事件不能绑定在父级元素A上,应该只能绑定在图片上,鼠标移动上去后,显示镜头及放大区域,移出图片后删除这两个元素。

mouseout和mouseover事件应该绑定到图片上,但鼠标移动到图片上后,显示出来的镜头(也就是被放大的区域)会覆盖在图片的上层,会截获图片的焦点,使其产生了mouseout事件。

jqzoom BUG:如果图片不能完全填充A 空白区域也会触发放大镜

magnify BUG:他把事件绑定在镜头上,稍微移动快了,鼠标会脱离镜头。

我想淘宝可能不完全是利用JS实现的,或许利用了z-index 和position 但我没有实现,请高人指点。

作者: luocheng_cn   发布时间: 2011-09-30

有用,占楼观看

作者: baibgyve   发布时间: 2011-10-01