想得到和淘宝商品详情页完全一样的放大镜效果千万不要推荐 jqzoom 和 magnify 这等插件,都有BUG
必须考虑到图片需要完全居中,商品图片不全是正方形,有宽有窄,触发事件不能绑定在父级元素A上,应该只能绑定在图片上,鼠标移动上去后,显示镜头及放大区域,移出图片后删除这两个元素。mouseout和mouseover事件应该绑定到图片上,但鼠标移动到图片上后,显示出来的镜头(也就是被放大的区域)会覆盖在图片的上层,会截获图片的焦点,使其产生了mouseout事件。jqzoom BUG:如果图片不能完全填充A 空白区域也会触发放大镜magnify BUG:他把事件绑定在镜头上,稍微移动快了,鼠标会脱离镜头。我想淘宝可能不完全是利用JS实现的,或许利用了z-index 和position 但我没有实现,请高人指点。

解决方案 »

  1.   

    右边的放大图你可以做一个位置固定的隐藏的div
    左边的mouseover事件会使右边的div出现,mouseout又会使他隐藏
    另外,图片的放大问题你自己应该能够解决吧
      

  2.   

    你都能看得出这两个插件的 BUG,你还觉得在这里能问出什么答案来吗这些公开发行的插件已经是比较成熟的组件了,试着去用;如果不好用的话,把它改得好用就行了
    实际上,在这里没有人可能为你去给你写一个这样的插件;就算写了,甚至 BUG 比你说的这两个插件还多
    如果嫌我说的话不好听,烦请不要听,谢谢
    另外,注意一下你的结贴率