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中interactive_timeout和wait_timeout的区别
查看>>
mysql中int、bigint、smallint 和 tinyint的区别、char和varchar的区别详细介绍
查看>>
mysql中json_extract的使用方法
查看>>
mysql中json_extract的使用方法
查看>>
mysql中kill掉所有锁表的进程
查看>>
mysql中like % %模糊查询
查看>>
MySql中mvcc学习记录
查看>>
mysql中null和空字符串的区别与问题！
查看>>
MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
查看>>
MYSQL中TINYINT的取值范围
查看>>
MySQL中UPDATE语句的神奇技巧，让你操作数据库如虎添翼！
查看>>
Mysql中varchar类型数字排序不对踩坑记录
查看>>
MySQL中一条SQL语句到底是如何执行的呢？
查看>>
MySQL中你必须知道的10件事，1.5万字！
查看>>
MySQL中使用IN（）查询到底走不走索引？
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法（全）
查看>>