用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对表单的操作代码集合
Apr 06 Javascript
jQuery的ready方法详解
Nov 27 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
vue实现百度语音合成的实例讲解
Oct 14 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启动时候提示PHP startup的解决方法
2013/05/07 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
js字符编码函数区别分析
2008/06/05 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python import自定义模块方法
2015/02/12 Python
Python内建模块struct实例详解
2018/02/02 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Skyscanner波兰:廉价航班
2017/11/07 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
什么是lambda函数
2013/09/17 面试题
出纳员岗位责任制
2014/02/11 职场文书
制作部班长职位说明书
2014/02/26 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
家长建议怎么写
2014/05/15 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
个人汇报材料范文
2014/12/30 职场文书
慰问信范文
2015/02/14 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书