用js制作淘宝放大镜效果
本文实例为大家分享了js制作淘宝放大镜效果的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
img{
width:100%;
height:100%;
}
#content{
width:auto;
height:auto;
margin-left:200px;
margin-top:60px;
}
#content-left{
position:relative;
width:420px;
height:auto;
float:left;
}
#middle{
border:1pxsolid#d2d2d2;
width:418px;
height:418px;
}
#small{
width:420px;
height:auto;
}
#glass{
position:absolute;
width:200px;
height:200px;
background-color:pink;
top:0;
opacity:0.5;
z-index:1;
display:none;
}
ul{
width:inherit;
height:60px;
}
ulli{
display:inline;
height:60px;
list-style:none;
float:left;
margin:10px;
}
#content-right{
position:relative;
width:418px;
height:418px;
border:1pxsolid#ccc;
float:left;
margin-left:10px;
overflow:hidden;
display:none;
}
#content-rightimg{
position:absolute;
width:836px;
height:836px;
}
</style>
</head>
<body>
<divid="content">
<divid="content-left">
<divid="middle">
<divid="glass"></div>
<imgsrc="img/01.jpg"/>
</div>
<divid="small">
<ul>
<li><imgsrc="img/1.jpg"/></li>
<li><imgsrc="img/2.jpg"/></li>
<li><imgsrc="img/3.jpg"/></li>
<li><imgsrc="img/4.jpg"/></li>
<li><imgsrc="img/5.jpg"/></li>
</ul>
</div>
</div>
<divid="content-right">
<imgsrc="img/001.jpg"/>
</div>
</div>
</body>
<scripttype="text/javascript">
varsmallLi=document.getElementById("small").getElementsByTagName("ul")[0].getElementsByTagName("li");
varmiddle=document.getElementById("middle")
varmiddleImg=middle.getElementsByTagName("img")[0]
varcontentRight=document.getElementById("content-right");
varbigImg=contentRight.getElementsByTagName("img")[0]
varglass=document.getElementById("glass");
//获取放大镜大小
varbigImgWidth=getStyle(bigImg,"width");
varbigImgHeight=getStyle(bigImg,"height");
varcontentRightWidth=getStyle(contentRight,"width");
varcontentRightHeight=getStyle(contentRight,"height");
varmiddleWidth=getStyle(middle,"width");
varmiddleHeight=getStyle(middle,"height");
varglassWidth=contentRightWidth/bigImgWidth*middleWidth;
varglassHeight=contentRightHeight/bigImgHeight*middleHeight;
varmiddleBorder=getStyle(middle,"border")
glass.style.width=glassWidth+"px";
glass.style.height=glassHeight+"px";
for(vari=0;i<smallLi.length;i++){
(function(index){
smallLi[i].onmouseover=function(){
middleImg.src="img/0"+index+".jpg";
bigImg.src="img/00"+index+".jpg"
}
})((i+1));
}
middle.onmouseover=function(){
contentRight.style.display="block"
glass.style.display="block"
middle.onmousemove=function(ev){
varevt=ev||event
varx=evt.x-content.offsetLeft-glass.offsetWidth/2+window.scrollX-middleBorder
vary=evt.y-content.offsetTop-glass.offsetHeight/2+window.scrollY-middleBorder
if(x<=middleBorder){
x=middleBorder;
}
if(x>=middle.offsetWidth-glass.offsetWidth-middleBorder){
x=middle.offsetWidth-glass.offsetWidth-middleBorder;
}
if(y<=middleBorder){
y=middleBorder;
}
if(y>=middle.offsetHeight-glass.offsetHeight-middleBorder){
y=middle.offsetHeight-glass.offsetHeight-middleBorder;
}
glass.style.left=x+"px"
glass.style.top=y+"px"
bigImg.style.left=-x*middleWidth/glassWidth+middleBorder*2+"px"
bigImg.style.top=-y*middleHeight/glassHeight+middleBorder*2+"px"
console.log(x)
console.log(x*middleWidth/glassWidth)
}
middle.onmouseout=function(){
contentRight.style.display="none";
glass.style.display="none";
}
}
functiongetStyle(obj,attr){//获取css属性
return(obj.currentStyle)?parseInt(obj.currentStyle[attr]):parseInt(getComputedStyle(obj,false)[attr]);
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。