用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 相关文章推荐
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
js模拟实现百度搜索
Jun 28 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新手上路(六)
2006/10/09 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
jQuery实现电梯导航模块
2020/12/22 jQuery
Django中Forms的使用代码解析
2018/02/10 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
大学生家政服务项目创业计划书
2014/01/30 职场文书
软件项目开发计划书
2014/05/01 职场文书
门面房租房协议书
2014/08/20 职场文书
《检阅》教学反思
2016/02/22 职场文书
怎样写好工作计划
2019/04/10 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技