本文实例为大家分享了javascript实现电商放大镜效果的具体代码,供大家参考,具体内容如下
学习内容:
1、event.pageX 属性返回鼠标指针的位置,相对于文档的左边缘。
2、clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标。
3、onmouseenter鼠标移入
4、onmouseleave鼠标移出
案例完整代码。html+css3+javascript
案例需求:鼠标点击左边图片时(鼠标呈十字架),遮罩层显示,右边盒子显示。且鼠标移动中心在遮罩层中心,右边大盒子显示鼠标点到的地方,以800:350比例显示。遮罩层只能规定左边盒子范围内移动而且不给超出。
步骤:
1. 查找元素
1.1 查找 main 总分区
1.2 查找 small 盒子
1.3 查找 small 盒子内的 img 小图片
1.4 查找 mask 遮罩层
1.5 查找 big 盒子
1.6 查找 big 盒子内的 img 大图片
2. 鼠标移入 main 的时候
2.1 显示 遮罩盒子
2.2 显示 大图分区
3. 鼠标移出 main 的时候
3.1 隐藏 遮罩盒子
3.2 隐藏 大图分区
4. 鼠标在 main 移动的时候 !!!
4.1 遮罩盒子 跟随 鼠标移动
4.2 遮罩盒子 在 鼠标中心 处理
4.3 遮罩盒子 在 分区边界 内移动处理
4.4 大图片 <反向> <按比例> 跟随 鼠标移动
注意. 获取元素偏移值和宽高
1. 获取 分区 的 水平,垂直偏移值
2. 获取 分区 的 宽度,高度
3. 获取 遮罩盒子 的 宽度,高度 (隐藏的盒子无法获取宽高)
4. 获取 大图片 的 宽度,高度 (隐藏的盒子无法获取宽高)
html代码:
<body> <!-- 整个大盒子 --> <div class="main" id="main"> <div class="small"> <!--小图--> <img alt="" class="smallImg" src="../img/iphoneX.jpg" width="350" /> <!-- 遮挡层,黄色的小方块 --> <div class="mask"></div> </div> <!--大层--> <div class="big"> <!--大图--> <img alt="" class="bigImg" src="../img/iphoneX.jpg" width="800" /> </div> </div> </body>
css代码:
<style> * { margin: 0; padding: 0; } .main { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative; } .big { width: 400px; height: 400px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; display: none; } .mask { width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0px; left: 0px; /* 把鼠标指针换成移动图标 */ cursor: move; display: none; } .small { position: relative; height: 350px; width: 350px; } .active .mask, .active .big { display: block; } .big img { /* 相对定位:相对自己原本的位置定位,原来的位置保留的 */ position: absolute; } </style>
javascript代码:
<script> //查找元素 var main = document.querySelector(".main"); var small = document.querySelector(".small"); //左边小盒子 var smallImg = document.querySelector(".smallImg"); var mask = document.querySelector(".mask"); //黄色遮罩层 var big = document.querySelector(".big");//右边小盒子 var bigImg = document.querySelector(".big .bigImg"); //2. 鼠标移入 main 的时候 //2.1 显示 遮罩盒子 // 2.2 显示 大图分区 main.onmouseenter=function () { mask.style.display="block"; big.style.display="block"; }; main.onmouseleave=function () { mask.style.display="none"; big.style.display="none"; }; // 4. 鼠标在 main 移动的时候 !!! // 4.1 遮罩盒子 跟随 鼠标移动 // 4.2 遮罩盒子 在 鼠标中心 处理 // 4.3 遮罩盒子 在 分区边界 内移动处理 // 4.4 大图片 <反向> <按比例> 跟随 鼠标移动 small.onmousemove=function (e) { var x=e.pageX-100-(175/2); //盒子的宽高为300px,因为鼠标默认在左上角。因为需要向左移动自身一半 var y=e.pageY-100-(175/2); 盒子的宽高为300px,因为鼠标默认在左上角。因为需要向下移动自身一半 if(x<0) x=0; //规定遮罩层移动范围。如果遮罩层超出了小盒子边框,x就重置为0. if(y<0) y=0; // //规定遮罩层移动范围。如果遮罩层超出了小盒子边框,y就重置为0. if(x>175) x=175; //遮罩层本身的宽高为175 if(y>175) y=175; mask.style.top=(y)+"px"; mask.style.left=(x)+"px"; bigImg.style.top=(-y*(800/350))+"px"; //右边放大效果,以800:350显示 bigImg.style.left=(-x*(800/350))+"px"; //在xy前面加-号是因为需要反向显示 } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
Windows 10秘密地在RegBack文件夹中备份了注册表,可以使用它来将计算机手动还原...
HTML设计模式学习笔记 本周我主要学习了HTML的设计模式,现将我的学习内容总结如...
半导体基础知识 物质按照其导电能力可以分为导体、半导体和绝缘体三种类型导电能...
idea打开的多了 内存占用也就多了 下边是亲试的优化ide性能的方法 1.设置JVM的启...
最近在update某张表时突然提示了个比较少见的错误,ORA-01591,这个问题跟平时的...
一、适用场景 有时我们想要复制一份远端check下来的代码在本地进行自由改动,但...
非ES6代码实现继承的主流方式主要可以分为: 构造继承、原型链继承、构造继承+原...
对于微软来说,他们一直没有关闭一些盗版Windows系统转正的渠道,不过虽然可以更...
目录 一.什么是Promise 二.为啥使用Promise 三. promise初体验 四promise体验aja...
前言 如果你是一个初学者开始学习 ASP.NET 或 ASP.NET MVC, 你可能并不知道什么...