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

JavaScript07

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

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

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

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

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

也就是

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8"/>

<title>放大镜</title>

<meta name="keywords" content="" />

<meta name="Description" content="" />

<style type="text/css">

body,div,img {padding:0margin:0}

.con {width:256pxheight:192pxfloat:left}

.con img {width:256pxheight:192pxposition:absoluteborder:1px blue solid}

.dingwei {position:absolutewidth:100pxheight:100pxbackground-color:blackfilter:alpha(opacity=20)opacity:0.2cursor:movedisplay:none}

.big {float:leftwidth:400pxheight:400pxmargin:100pxoverflow:hidden}

</style>

</head>

<body>

<div class="con" id="father" style="position:relative">

<img src="images/huo.jpg" alt="图片"/>

<div id="aa" class="dingwei"> </div>

</div>

<div class="big" id="bpic">

<div class="inside"><img src="images/huo.jpg" alt="图片"/></div>

</div>

<script type="text/javascript">

var divs=document.getElementById("aa")

var fa=document.getElementById("father")

var maxWidth=maxHeight=S=0

var big=document.getElementById("bpic")

fa.onmouseover=function(){

divs.style.display="block"

big.style.display="block"

S=divs.offsetHeight/2

maxWidth=fa.clientWidth-divs.offsetWidth

maxHeight=fa.clientHeight-divs.offsetHeight//物块的活动范围；

}

fa.onmousemove=function(e){

a=e||window.event

var sbX=a.clientX

var sbY=a.clientY

var num=big.clientWidth/divs.clientWidth

var lf=sbX-S//鼠标的位置减去元素位置的一半的值就是元素的定位值；

var tp=sbY-S

//tp =tp<0?0:tp>maxHeight?maxHeight:tp

//lf =lf<0?0:lf>maxWidth?maxWidth:lf//判断物块的定位位置然后进行设置

if(tp<0){tp=0}

else{

if(tp>maxHeight){tp=maxHeight}

else{tp=sbY-S}

}

//判断物块的位置进行设置

if(lf<0){lf=0}

else{

if(lf>maxWidth){lf=maxWidth}

else{lf=sbX-S}

}

divs.style.left=lf+"px"

divs.style.top=tp+"px"

big.scrollLeft=num*lf

big.scrollTop=num*tp

}

fa.onmouseout=function(){

divs.style.display="none"

big.style.display="none"

}

</script>

</body>

</html>

这是放大镜效果的代码 你说的开启和关闭你自己再加上去就行了