本文共 5859 字,大约阅读时间需要 19 分钟。
<div id="box" > <div id="small"><!-- 小图片所在的盒子 --> <img src="001.jpg" alt="" /><!-- 小图片:350*350 --> <div id="mask"></div><!-- 遮罩层:175*175 --> </div> <div id="big"><!-- 大图片所在的盒子:400*400 --> <img src="0001.jpg" alt="" id="bigImg"/><!-- 大图片:800*800 --> </div></div>
<style>*{ margin: 0; padding: 0;}#box{ width: 350px; height: 350px; border: 1px solid #000; margin: 200px; position: relative;}#big{ width: 400px; height: 400px; border: 1px solid #000; overflow: hidden; position: absolute; top:0; left : 360px; display: none;}#mask{ width: 175px; height: 175px; background: paleturquoise; position: absolute; left:0; top: 0; opacity: 0.3; display: none; cursor: move;}#small{ position: relative;}#bigImg{ position: absolute; left: 0; top: 0;} </style>
<script>// 根据id获取元素function $id(id){ return document.getElementById(id);}// 返回页面被卷曲的距离:垂直,水平function scroll(){ return { top:document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset, left:document.body.scrollLeft||document.documentElement.scrollLeft||window.pageXOffset }} </script>
<script>// 获取相关元素var box = $id('box');//总容器var smallDiv = $id('small');//小盒子var maskDiv = $id('mask');//遮罩层var bigDiv = $id('big');//大盒子var bigImg = $id('bigImg');//大图片 // 1 鼠标移入小盒子里面smallDiv.onmouseenter = function(){ // 大盒子显示,mask显示 bigDiv.style.display = 'block'; maskDiv.style.display = 'block';}// 2 鼠标移出小盒子smallDiv.onmouseleave = function(){ // 大盒子隐藏,mask隐藏 bigDiv.style.display = "none"; maskDiv.style.display = "none";}// 3 鼠标在小盒子里面移动smallDiv.onmousemove = function(e){ e = window.event || e; // mask跟随鼠标移动,鼠标在mask中间 // 如果不出滚动条:e.clientY = e.pageY // 如果出了滚动条:e.clientY != e.pageY // 建议使用:e.pageY = e.clientY + scrollTop; var left = (e.clientX+scroll().left) - box.offsetLeft; var top = (e.clientY+scroll().top) - box.offsetTop; // 要鼠标在mask中间 left = left - maskDiv.offsetWidth/2; top = top - maskDiv.offsetWidth/2; // 4 边界监测:mask不能超出小盒子范围 if(left<0){ left = 0; } if(left>smallDiv.offsetWidth-maskDiv.offsetWidth){ left = smallDiv.offsetWidth-maskDiv.offsetWidth } if(top<0){ top = 0; } if(top>smallDiv.offsetHeight-maskDiv.offsetHeight){ top=smallDiv.offsetHeight-maskDiv.offsetHeight } // 定位mask maskDiv.style.left = left + 'px'; maskDiv.style.top = top + 'px'; // 5 鼠标在小盒子里面移动,大盒子显示大图的相应部分 // left/smallDiv.offsetWidth = bigImg左移的距离/bigImg.offsetWidth bigImg.style.left = -left/smallDiv.offsetWidth*bigImg.offsetWidth+"px"; // top/smallDiv.offsetHeight = bigImg上移的距离/bigImg.offsetHeight bigImg.style.top = -top/smallDiv.offsetHeight*bigImg.offsetHeight+"px";}</script>
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>09放大镜</title></head><style type="text/css"> * { margin: 0; padding: 0; } #box { width: 350px; height: 350px; border: 1px solid #000; margin: 200px; position: relative; } #big { width: 400px; height: 400px; border: 1px solid #000; overflow: hidden; position: absolute; top: 0; left: 360px; display: none; } #mask { width: 175px; height: 175px; background: paleturquoise; position: absolute; left: 0; top: 0; opacity: 0.3; display: none; cursor: move; } #small { position: relative; } #bigImg { position: absolute; left: 0; top: 0; }</style><body> <div id="box"> <div id="small"> <!-- 小图片所在的盒子 --> <img src="001.jpg" alt="" /><!-- 小图片:350*350 --> <div id="mask"></div><!-- 遮罩层:175*175 --> </div> <div id="big"> <!-- 大图片所在的盒子:400*400 --> <img src="0001.jpg" alt="" id="bigImg" /><!-- 大图片:800*800 --> </div> </div> <script> // 根据id获取元素 function $id(id) { return document.getElementById(id); } // 返回页面被卷曲的距离:垂直,水平 function scroll() { return { top: document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset, left: document.body.scrollLeft || document.documentElement.scrollLeft || window.pageXOffset } } // 获取相关元素 var box = $id('box');//总容器 var smallDiv = $id('small');//小盒子 var maskDiv = $id('mask');//遮罩层 var bigDiv = $id('big');//大盒子 var bigImg = $id('bigImg');//大图片 // 1 鼠标移入小盒子里面 smallDiv.onmouseenter = function () { // 大盒子显示,mask显示 bigDiv.style.display = 'block'; maskDiv.style.display = 'block'; } // 2 鼠标移出小盒子 smallDiv.onmouseleave = function () { // 大盒子隐藏,mask隐藏 bigDiv.style.display = "none"; maskDiv.style.display = "none"; } // 3 鼠标在小盒子里面移动 smallDiv.onmousemove = function (e) { e = window.event || e; // mask跟随鼠标移动,鼠标在mask中间 // 如果不出滚动条:e.clientY = e.pageY // 如果出了滚动条:e.clientY != e.pageY // 建议使用:e.pageY = e.clientY + scrollTop; var left = (e.clientX + scroll().left) - box.offsetLeft; var top = (e.clientY + scroll().top) - box.offsetTop; // 要鼠标在mask中间 left = left - maskDiv.offsetWidth / 2; top = top - maskDiv.offsetWidth / 2; // 4 边界监测:mask不能超出小盒子范围 if (left < 0) { left = 0; } if (left > smallDiv.offsetWidth - maskDiv.offsetWidth) { left = smallDiv.offsetWidth - maskDiv.offsetWidth } if (top < 0) { top = 0; } if (top > smallDiv.offsetHeight - maskDiv.offsetHeight) { top = smallDiv.offsetHeight - maskDiv.offsetHeight } // 定位mask maskDiv.style.left = left + 'px'; maskDiv.style.top = top + 'px'; // 5 鼠标在小盒子里面移动,大盒子显示大图的相应部分 // left/smallDiv.offsetWidth = bigImg左移的距离/bigImg.offsetWidth bigImg.style.left = -left / smallDiv.offsetWidth * bigImg.offsetWidth + "px"; // top/smallDiv.offsetHeight = bigImg上移的距离/bigImg.offsetHeight bigImg.style.top = -top / smallDiv.offsetHeight * bigImg.offsetHeight + "px"; } </script></body></html>
由于你们没有图片,直接复制代码,展示不出效果,大家可以自己找几张图片来代替,稍微修改下即可,只要能看得懂代码,修改起来莫得问题啦
转载地址:http://kyxh.baihongyu.com/