JavaScript_放大镜效果
本文共 5859 字，大约阅读时间需要 19 分钟。
文章目录
效果图：
需求分析：
- 鼠标移入小盒子里面，大盒子显示,mask显示
- 鼠标移出小盒子，大盒子隐藏，mask隐藏
- 鼠标在小盒子里面移动，mask跟随鼠标移动，鼠标在mask中间
- mask不能超出小盒子范围
- 鼠标在小盒子里面移动，大盒子显示大图的相应部分
源代码：
- HTML部分
<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>- css部分
<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>- JavaScript部分
- 为了简化代码，先封装一些常用的自定义构造函数
<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>- js主体部分，需要用到封装的函数，调用即可
<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/
你可能感兴趣的文章
MySQL_西安11月销售昨日未上架的产品_20161212
查看>>
Mysql——深入浅出InnoDB底层原理
查看>>
MySQL“被动”性能优化汇总
查看>>
MySQL、HBase 和 Elasticsearch：特点与区别详解
查看>>
MySQL、Redis高频面试题汇总
查看>>
MYSQL、SQL Server、Oracle数据库排序空值null问题及其解决办法
查看>>
mysql一个字段为空时使用另一个字段排序
查看>>
MySQL一个表A中多个字段关联了表B的ID，如何关联查询？
查看>>
MYSQL一直显示正在启动
查看>>
MySQL一站到底！华为首发MySQL进阶宝典，基础+优化+源码+架构+实战五飞
查看>>
MySQL万字总结！超详细！
查看>>
Mysql下载以及安装(新手入门，超详细)
查看>>
MySQL不会性能调优？看看这份清华架构师编写的MySQL性能优化手册吧
查看>>
MySQL不同字符集及排序规则详解：业务场景下的最佳选
查看>>
Mysql不同官方版本对比
查看>>
MySQL与Informix数据库中的同义表创建：深入解析与比较
查看>>
mysql与mem_细说 MySQL 之 MEM_ROOT
查看>>
MySQL与Oracle的数据迁移注意事项，另附转换工具链接
查看>>
mysql丢失更新问题
查看>>
MySQL两千万数据优化&迁移
查看>>