怎么用javascript代码实现淘宝宝贝图片放大镜效果(鼠标移至小图 显示大图效果),谢谢了
展开全部
如果可以用插件的话推荐用jquery插件来实现,一分钟搞定。
如果不能的话就告诉你原理吧,至于具体的实现要做到兼容所有浏览器不是一件省心的事。
首先要准备两张图片(一个是小的预览图,一个是很大的高清图)
然后写一个DIV,里面放一个IMG和一个DIV
也就是
<div><img src="预览图地址" /><div></div></div>
然后给img绑定mousemove事件,在事件内写下如下实现的代码
首先计算出鼠标在这个img标签上的相对坐标,如果是在img的最左上边。坐标则为0,0
然后吧这个DIV内部的小DIV固定为100*100大小,然后再就是计算它的比例。
然后再把这个DIV的背景设置成那个大图,然后再用背景的绝对定位进行移动即可
如果不能的话就告诉你原理吧,至于具体的实现要做到兼容所有浏览器不是一件省心的事。
首先要准备两张图片(一个是小的预览图,一个是很大的高清图)
然后写一个DIV,里面放一个IMG和一个DIV
也就是
<div><img src="预览图地址" /><div></div></div>
然后给img绑定mousemove事件,在事件内写下如下实现的代码
首先计算出鼠标在这个img标签上的相对坐标,如果是在img的最左上边。坐标则为0,0
然后吧这个DIV内部的小DIV固定为100*100大小,然后再就是计算它的比例。
然后再把这个DIV的背景设置成那个大图,然后再用背景的绝对定位进行移动即可
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询