怎么用javascript代码实现淘宝宝贝图片放大镜效果（鼠标移至小图 显示大图效果），谢谢了

JavaScript031

怎么用javascript代码实现淘宝宝贝图片放大镜效果（鼠标移至小图 显示大图效果），谢谢了,第1张

如果可以用插件的话推荐用jquery插件来实现，一分钟搞定。

如果不能的话就告诉你原理吧，至于具体的实现要做到兼容所有浏览器不是一件省心的事。

首先要准备两张图片（一个是小的预览图，一个是很大的高清图）

然后写一个DIV，里面放一个IMG和一个DIV

也就是

<div><img src="预览图地址" /><div></div></div>

然后给img绑定mousemove事件，在事件内写下如下实现的代码

首先计算出鼠标在这个img标签上的相对坐标，如果是在img的最左上边。坐标则为0,0

然后吧这个DIV内部的小DIV固定为100*100大小，然后再就是计算它的比例。

然后再把这个DIV的背景设置成那个大图，然后再用背景的绝对定位进行移动即可

ie浏览器中有自带的切换效果可供调用；

其它浏览器的话得自己写程序定位，如淡入淡出可以利用设置css的opacity属性实现；

百叶窗可以利用程序生成N个div，每个div的背景图为你要加载的图，然后设置好每个div的位置即可

$(function(){

var num=0,y=0

function time() { 

num+=80

if(num>400){

num=0

}

$("#fav-icon").css("background-position",num+'px '+y+"px")

} 

$(".fav").hover(function(){

inte= setInterval(time, 500) 

},function(){

clearInterval(inte)

$("#fav-icon").css("background-position",0+'px '+0+"px")

})

})