本文实例为大家分享了js放大镜效果展示的具体代码,供大家参考,具体内容如下
成都创新互联是一家集网站建设,沙河企业网站建设,沙河品牌网站建设,网站定制,沙河网站建设报价,网络营销,网络优化,沙河网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
具体代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div,img{ margin:0; padding:0; } img{ display:block; border:none; } #box{ position:absolute; top:20px; left:20px; width:350px; height:350px; box-shadow:3px 3px 10px 0 #111111; } #box img{ width:100%; height:100%; } #mark{ display:none; position:absolute; top:0; left:0; width:175px; height:175px; background:#000; opacity: 0.5; filter:alpha(opacity=50); cursor:move; } #boxRight{ display:none; position:absolute; top:20px; left:380px; width:350px; height:350px; overflow:hidden; } /*我们右侧的图片的大小是需要严格计算的: mark的width是box的width的一半,那么我们的大图宽度也应该是小图的二倍 */ #boxRight img{ position:absolute; top:0; left:0; width:200%; height:200%; } </style> </head> <body> <div id='box'> <img src="img/iphone.jpg" alt=""> <div id='mark'></div> </div> <div id='boxRight'> <img src="img/iphone_big.jpg" alt=""> </div> <script> //放大镜的原理: 我们的mark横向是box的一半,纵向也是box的一半,那么右侧的大图横向(纵向)应该是左侧小图的2倍 var box = document.getElementById('box'); var mark = document.getElementById('mark'); var boxRight = document.getElementById('boxRight'); //设置mark这个盒子 function setPosition(e){ var top = e.clientY - box.offsetTop - (mark.offsetHeight/2); var left = e.clientX - box.offsetLeft - (mark.offsetWidth/2); //边界判断 var tempL = 0,tempT = 0; var minL = 0,minT = 0,maxL = box.offsetWidth - mark.offsetWidth,maxT = box.offsetHeight - mark.offsetHeight ; if(left<minL){ mark.style.left = minL + "px"; tempL = minL; }else if(left>maxL){ mark.style.left = maxL + "px"; tempL = maxL; }else{ mark.style.left = left + "px"; tempL = left; } if(top<minT){ mark.style.top = minT + "px"; tempT = minT; }else if(top>maxT){ mark.style.top = maxT + "px"; tempT = maxT; }else{ mark.style.top = top + "px"; tempT = top; } //右侧图片跟着运动:左侧移动多少,右侧跟着移动他的2倍即可 var oImg = boxRight.getElementsByTagName("img")[0]; oImg.style.left = -tempL*2 + "px"; oImg.style.top = -tempT*2 + "px"; } box.onmouseenter = function(e){ e = e || window.event; mark.style.display = "block"; setPosition(e); boxRight.style.display = "block"; } box.onmousemove = function(e){ e = e || window.event; setPosition(e); } box.onmouseleave = function(e){ e = e || window.event; mark.style.display = "none"; boxRight.style.display = "none"; } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
文章标题:简单实现js放大镜效果
链接地址:https://www.cdcxhl.com/article6/pgidig.html
成都网站建设公司_创新互联,为您提供企业建站、标签优化、软件开发、App设计、App开发、搜索引擎优化
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联