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/
你可能感兴趣的文章
mysql5.7 for windows_MySQL 5.7 for Windows 解压缩版配置安装
查看>>
Webpack 基本环境搭建
查看>>
mysql5.7 安装版 表不能输入汉字解决方案
查看>>
MySQL5.7.18主从复制搭建(一主一从)
查看>>
MySQL5.7.19-win64安装启动
查看>>
mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程
查看>>
MySQL5.7.37windows解压版的安装使用
查看>>
mysql5.7免费下载地址
查看>>
mysql5.7命令总结
查看>>
mysql5.7安装
查看>>
mysql5.7性能调优my.ini
查看>>
MySQL5.7新增Performance Schema表
查看>>
Mysql5.7深入学习 1.MySQL 5.7 中的新增功能
查看>>
Webpack 之 basic chunk graph
查看>>
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>
mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
查看>>
Mysql8 数据库安装及主从配置 | Spring Cloud 2
查看>>
mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件 能够使用的my.cnf配置文件
查看>>
MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
查看>>