JS_模拟电商网站放大镜效果
很多电商网站,都有图片,鼠标移入图片会出现一个大图,随着鼠标的移动,大图的位置也会跟着移动
下面贴上代码
html:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div class="enlageTool"> 2 <div class="normalImg" id="normalImg"> 3 <div class="enlageGlass" id="enlageGlass"></div> 4 </div> 5 <div class="enlageImg" id="enlageImg"></div> 6 </div>
css:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 *{ 2 margin:0; 3 padding: 0; 4 box-sizing: border-box; 5 } 6 .enlageTool{ 7 position: relative; 8 margin:100px; 9 } 10 .normalImg{ 11 background: url('../images/notebook.jpeg') no-repeat; 12 width: 350px; 13 height: 350px; 14 border: 1px solid #000; 15 } 16 .enlageImg{ 17 background: url('../images/notebook-big.jpeg') no-repeat left top; 18 width: 400px; 19 height: 400px; 20 border: 1px solid #000; 21 position: absolute; 22 top: 0; 23 left: 350px; 24 display: none; 25 } 26 .enlageGlass{ 27 background: #fede4f; 28 width: 175px; 29 height: 175px; 30 opacity: 0.5; 31 cursor: move; 32 position: absolute; 33 top: 0; 34 left: 0; 35 display: none; 36 }
common.js
1 var objAnim = function(){ 2 3 this.zoomMove =function(normalImg,enlageGlass,enlageImg,event){ 4 var e = event || window.event; 5 var scrollPosX = window.pageXOffset || document.documentElement.scrollLeft; 6 var scrollPosY = window.pageYOffset || document.documentElement.scrollTop; 7 var times = enlageImg.offsetWidth/normalImg.offsetWidth; 8 9 var desX = e.clientX - normalImg.parentNode.offsetLeft + scrollPosX - enlageGlass.offsetWidth/2; 10 var desY = e.clientY - normalImg.parentNode.offsetTop + scrollPosY - enlageGlass.offsetHeight/2 11 12 if(desX<0){ 13 desX = 0; 14 } 15 else if(desX > normalImg.offsetWidth - enlageGlass.offsetWidth){ 16 desX = normalImg.offsetWidth - enlageGlass.offsetWidth; 17 } 18 19 if(desY < 0){ 20 desY = 0; 21 } 22 else if(desY > normalImg.offsetHeight - enlageGlass.offsetHeight){ 23 desY = normalImg.offsetHeight - enlageGlass.offsetHeight; 24 } 25 26 enlageGlass.style.left = desX + "px"; 27 enlageGlass.style.top = desY +"px"; 28 29 enlageImg.style.backgroundPosition = -desX*times + "px "+(-desY*times) +"px"; 30 31 } 32 33 this.zoomIn = function(enlageGlass,enlageImg){ 34 enlageImg.style.display = "block"; 35 enlageGlass.style.display = "block"; 36 } 37 38 this.zoomOut = function(enlageGlass,enlageImg){ 39 enlageImg.style.display = "none"; 40 enlageGlass.style.display = "none"; 41 } 42 43 }
function.js
1 window.addEventListener("load",loadPage) 2 3 function loadPage(){ 4 var enlageGlass = document.getElementById("enlageGlass"); 5 var normalImg = document.getElementById("normalImg"); 6 var enlageImg = document.getElementById("enlageImg"); 7 8 var zoom = new objAnim(); 9 10 normalImg.addEventListener("mousemove",function(event){ 11 zoom.zoomMove(normalImg,enlageGlass,enlageImg,event); 12 }) 13 14 normalImg.addEventListener("mouseover",function(){ 15 zoom.zoomIn(enlageGlass,enlageImg); 16 }) 17 18 normalImg.addEventListener("mouseout",function(){ 19 zoom.zoomOut(enlageGlass,enlageImg); 20 }) 21 }
由于图片的限制原因,就不做效果展示了。
下面po一张效果截图供参考:
以上内容,如有错误请指出,不甚感激。