用js实现放大镜效果


Posted in Javascript onOctober 28, 2020

本文实例为大家分享了js实现放大镜效果的具体代码,供大家参考,具体内容如下

该放大区域用背景图片放大

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title></title>
 <style type="text/css">
 body {
 height: 1200px;
 background-color: lightskyblue;
 }

 ul {
 margin: 0;
 padding: 0;
 list-style: none;
 }

 .itemarea {
 position: relative;
 width: 500px;
 height: 680px;
 border: 1px black solid;
 margin: 50px auto;
 }

 .itemarea .pic {
 margin-bottom: 15px;
 }

 .itemarea img {
 width: 500px;
 height: 600px;

 }

 .itemarea .pic .cover {
 position: absolute;
 left: 0;
 top: 0;
 width: 200px;
 height: 200px;
 background-image: url(img/7.png);
 opacity: 0.6;
 display: none;
 }

 .itemarea .list {
 display: flex;

 }

 .itemarea .list li {
 margin: auto;
 }

 .itemarea .list img {
 display: block;
 width: 50px;
 height: 50px;
 }

 .itemarea .detail {
 position: absolute;
 top: 0;
 left: 500px;
 /* 此处为放大2倍,显示框的大小是遮阴框宽高的2倍 */
 width: 400px;
 height: 400px;
 display: none;
 border: 1px black solid;
 background: url(img/1.PNG);
 /* 此处放大2倍,背景图片的宽高是左边显示图片的2倍 */
 background-size: 1000px 1200px;
 /* background-size: 200%; 或者这样写*/

 }

 .itemarea .list .current {
 border: 2px green solid;
 }
 </style>
 </head>
 <body>
 <div class="itemarea">
 <div class="pic">
 <img src="img/1.PNG">
 <div class="cover"></div>
 </div>
 <ul class="list">
 <li><img src="img/1.PNG"></li>
 <li><img src="img/2.PNG"></li>
 <li><img src="img/3.PNG"></li>
 <li><img src="img/4.PNG"></li>
 <li><img src="img/5.PNG"></li>
 <li><img src="img/6.PNG"></li>
 </ul>
 <div class="detail">

 </div>
 </div>
 <script type="text/javascript">
 /* 
 需求
 1,鼠标放入图片时候,会动态修改图片地址
 2,鼠标放入大图,会动态修改右边图片位置
 2.1显示图片的放大镜,
 2.2显示右边效果
 */
 var itemarea = document.querySelector(".itemarea");
 var list = document.querySelector(".list");
 /* 上面的大图片 */
 img = document.querySelector(".pic img");
 /* 所有的图片 */
 imgs = list.querySelectorAll("img");
 /* 主图片展示区域 */
 pic = document.querySelector(".itemarea .pic");
 /* 放大镜 */
 cover = document.querySelector(".cover");
 /* 放大的区域 */
 detail = document.querySelector(".detail");
 /* 监听事件,切换图片src */
 list.addEventListener("mousemove", function(e) {
 if (e.target.tagName == "IMG") {
  img.src = e.target.src;
  detail.style.backgroundImage = "url(" + e.target.src + ")";
  /* 遍历 所有边框都为空*/
  imgs.forEach(function(item) {
  item.className = "";
  })
  /* 选中的改变边框颜色*/
  e.target.className = "current";
 }
 })
 pic.addEventListener("mousemove", function(e) {
 /* 放大镜距离浏览器的距离 */
 var x = e.clientX;
 y = e.clientY;
 /* 图片框距离浏览器的距离 */
 cx = pic.getBoundingClientRect().left;
 cy = pic.getBoundingClientRect().top;
 tx = x - cx - 100;
 ty = y - cy - 100;
 if (tx < 0) {
  tx = 0;
 }
 if (ty < 0) {
  ty = 0;
 }
 /* 显示图片宽-遮阴框的宽 */
 if (tx >300) {
  tx = 300;
 }
 /* 显示图片高-遮阴框的高 */
 if (ty > 400) {
  ty = 400;
 }
 cover.style.left = tx + "px";
 cover.style.top = ty + "px";
 /* 根据遮阴框在盒子的移动距离百分比------对应放映框在大图片的移动距离百分比 */
 /* tx,ty/遮阴框的极限范围 */
 detail.style.backgroundPosition = tx / 300 * 100 + "%" + ty / 400 * 100 + "%";
 })
 /* 移除隐藏 */
 itemarea.onmouseout = function() {
 cover.style.display = "none";
 detail.style.display = "none"
 }
 itemarea.onmouseover = function() {
 cover.style.display = "block";
 detail.style.display = "block";
 }
 </script>
 </body>
</html>

效果如下:

用js实现放大镜效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
JS处理VBArray的函数使用说明
May 11 Javascript
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 #Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 #Javascript
原生JS生成指定位数的验证码
Oct 28 #Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 #Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 #Javascript
通过JS判断网页是否为手机打开
Oct 28 #Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 #Javascript
You might like
php 验证码制作(网树注释思想)
2009/07/20 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
理解javascript中的闭包
2017/01/11 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
python使用KNN算法识别手写数字
2019/04/25 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
分公司经理岗位职责
2013/11/11 职场文书
采购员岗位职责
2013/11/15 职场文书
生日宴会答谢词
2014/01/09 职场文书
领导干部考察材料
2014/02/08 职场文书
教师党员承诺书
2014/03/25 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
大学班级计划书
2014/04/29 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
会议主持词开场白
2015/05/28 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android