用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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。