用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 相关文章推荐
javascript取消文本选定的实现代码
Nov 14 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 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
改变Apache端口等配置修改方法
2008/06/05 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
Python中的引用和拷贝浅析
2014/11/22 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
写给老婆的检讨书
2014/02/21 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
大学生操行评语大全
2014/12/31 职场文书
五年级上册复习计划
2015/01/19 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript