首页 > 代码库 > 放大镜效果
放大镜效果
放大镜效果（放大的照片需要自己添加）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜效果</title> <style> * { margin: 0; padding: 0; } body { background: #ccc; } #outer { width: 1200px; margin: 100px auto 0; overflow: hidden; padding: 10px; position: relative; } #minbox { float: left; width: 350px; height: 350px; /*border: 1px solid red;*/ position: relative; } #minbox img { width: 350px; height: 350px; } #minbox #shadow { height: 175px; width: 175px; background: yellow; opacity: 0.4; filter: alpha(opacity = 40); position: absolute; left: 0; top: 0; display: none; } #maxbox { height: 400px; width: 400px; overflow: hidden; position: absolute; left: 370px; top: 20px; /*border: 2px solid blue;*/ display: none; } #maxbox img { height: 800px; width: 800px; position: absolute; left: 0; top: 0; } #con { float: left; margin-left: 20px; } </style></head><body> <div id="outer"> <div id="minbox"> <img src="http://www.mamicode.com/images/min.jpg" > <p id="shadow"></p> </div> <div id="maxbox"> <img src="http://www.mamicode.com/images/max.jpg" > </div> <div id="con"> <img src="http://www.mamicode.com/images/msg.png" > </div> </div> <script> var $ = function(id) { return document.getElementById(id); } //获取元素到body的距离函数 function offsetTL(obj) { var l = 0, t = 0; while(obj) { l = l + obj.offsetLeft + obj.clientLeft; t = t + obj.offsetTop + obj.clientTop; obj = obj.offsetParent; } return {left: l, top: t} } console.log(offsetTL($(‘minbox‘)).left); var minImg = $(‘minbox‘).getElementsByTagName(‘img‘)[0]; var maxImg = $(‘maxbox‘).getElementsByTagName(‘img‘)[0]; // console.log(maxImg); $(‘minbox‘).onmousemove = function(e) { var e = e || window.event; $(‘shadow‘).style.display = ‘block‘; $(‘maxbox‘).style.display = ‘block‘; var movel = (e.clientX - offsetTL($(‘minbox‘)).left - $(‘shadow‘).offsetWidth/2); var movet = (e.clientY - offsetTL($(‘minbox‘)).top - $(‘shadow‘).offsetHeight/2); if (movel <= 0) { movel = 0; }else if(movel >= $(‘minbox‘).clientWidth - $(‘shadow‘).offsetWidth) { movel = $(‘minbox‘).clientWidth - $(‘shadow‘).offsetWidth; } if (movet <= 0) { movet = 0; }else if(movet >= $(‘minbox‘).clientHeight - $(‘shadow‘).offsetHeight) { movet = $(‘minbox‘).clientHeight - $(‘shadow‘).offsetHeight; } $(‘shadow‘).style.left = movel + ‘px‘; $(‘shadow‘).style.top = movet + ‘px‘; var scale = maxImg.offsetWidth/minImg.offsetWidth; maxImg.style.left = -movel * scale + ‘px‘; maxImg.style.top = -movet * scale + ‘px‘; } $(‘minbox‘).onmouseout = function() { $(‘shadow‘).style.display = ‘none‘; $(‘maxbox‘).style.display = ‘none‘; } </script></body></html>
放大镜效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。