用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 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 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作为网站开发语言的原因分享
2012/01/03 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
[00:16]热血竞技场
2019/03/06 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
StubHub德国:购买和出售门票
2017/09/06 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
秦始皇兵马俑导游词
2015/02/02 职场文书
横店影视城导游词
2015/02/06 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
高质量“欢迎词”
2019/04/03 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书