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/
你可能感兴趣的文章
MyEclipse用（JDBC）连接SQL出现的问题~
查看>>
myeclipse的新建severlet不见解决方法
查看>>
MyEclipse设置当前行背景颜色、选中单词前景色、背景色
查看>>
MyEclipse配置SVN
查看>>
MTCNN 人脸检测
查看>>
MyEcplise中SpringBoot怎样定制启动banner？
查看>>
MyPython
查看>>
MTD技术介绍
查看>>
MySQL
查看>>
mysql
查看>>
MTK Android 如何获取系统权限
查看>>
MySQL - 4种基本索引、聚簇索引和非聚索引、索引失效情况、SQL 优化
查看>>
MySQL - ERROR 1406
查看>>
mysql - 视图
查看>>
MySQL - 解读MySQL事务与锁机制
查看>>
mysql 1264_关于mysql 出现 1264 Out of range value for column 错误的解决办法
查看>>
mysql 1593_Linux高可用(HA)之MySQL主从复制中出现1593错误码的低级错误
查看>>
mysql ansi nulls_SET ANSI_NULLS ON SET QUOTED_IDENTIFIER ON 什么意思
查看>>
MySQL Binlog 日志监听与 Spring 集成实战
查看>>
multi-angle cosine and sines
查看>>