原生js实现淘宝放大镜效果


Posted in Javascript onOctober 28, 2020

大家经常逛淘宝、天猫、京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果。今天闲着没事干,就打算复习一下JavaScript基础,用一下基础知识制作一个类似于淘宝的放大镜效果。

先说一下这个效果需要用到的一些基础知识:

css相对定位:position:absolute;

鼠标移入移出以及移动事件:onmouseover、onmouseout、onmousemove,记住这些事件一般不会单个出现

获取鼠标点击坐标:X轴:clientX,Y轴:clientY

当前元素相对于父元素的左位移:offsetLeft

当前元素相对于父元素的上位移:offsetTop

当前元素的实际高、宽度(不包括滚动条):offsetWidth、offsetHeight

球当前元素的最小值,最大值:Math.min()、Math.max();

话不多说直接上代码吧!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#demo{
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#float-box{
position: relative;
z-index: 1;
}
#small-box{
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
cursor: move;
}
#big-box{
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
 
 
}
#big-box img{
position: absolute;
z-index: 5;
}
 
 
</style>
</head>
<body>
<div id="demo">
<div id="float-box">
<div id="small-box"></div>
<img src="../images/macbook-small.jpg">
</div>
<div id="big-box">
<img src="../images/macbook-big.jpg">
</div>
</div>
<script type="text/javascript">
window.onload = function(){
 
//获取到需要的元素
var demo = document.getElementById('demo');
var smallBbox = document.getElementById('small-box');
var floatBox = document.getElementById('float-box');
var bigBox = document.getElementById('big-box');
var bigBoxImg = bigBox.getElementsByTagName('img')[0];
 
 
floatBox.onmouseover = function(){
smallBbox.style.display = "block";
bigBox.style.display = "block";
}
floatBox.onmouseout = function(){
smallBbox.style.display = "none";
bigBox.style.display = "none";
}
floatBox.onmousemove = function(e){
var _event = e || event;
console.log(_event.clientY);
var l = _event.clientX - demo.offsetLeft - floatBox.offsetLeft - smallBbox.offsetWidth/2;//除2是因为让鼠标点出现在放大遮罩的中心位置
var t = _event.clientY - demo.offsetTop - floatBox.offsetTop - smallBbox.offsetHeight/2;
 
var demoWidth = demo.offsetWidth;
var demoHeight = demo.offsetHeight;
 
 
var smallBboxWidth = smallBbox.offsetWidth;
var smallBboxHeight = smallBbox.offsetHeight;
//鼠标可以移动的最大XY的距离
var maxX = demoWidth - smallBboxWidth;
var maxY = demoHeight - smallBboxHeight;
 
 
l = Math.min(maxX,Math.max(0,l));
t = Math.min(maxY,Math.max(0,t));
smallBbox.style.left = l +"px";
smallBbox.style.top = t +"px";
 
 
var percentX = l / (floatBox.offsetWidth - smallBboxWidth);//求出小图遮罩的坐标占可移动区域的比例
var percentY = t / (floatBox.offsetHeight - smallBboxHeight);
 
 
bigBoxImg.style.left = -percentX *(bigBoxImg.offsetWidth - bigBox.offsetWidth) +"px";//大图对的移动方向和小图遮罩的移动方向相反
bigBoxImg.style.top = -percentY*(bigBoxImg.offsetHeight - bigBox.offsetHeight)+"px";
 
}
}
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
微信小程序如何获取手机验证码
Nov 04 #Javascript
微信小程序实现弹出层效果
May 26 #Javascript
微信小程序实现预览图片功能
Oct 22 #Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 #Javascript
微信小程序实现多选功能
Nov 04 #Javascript
微信小程序实现无限滚动列表
May 29 #Javascript
微信小程序自定义轮播图
Nov 04 #Javascript
You might like
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
深入探讨前端框架react
2015/12/09 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python标准日志模块logging的使用方法
2013/11/01 Python
Python with的用法
2014/08/22 Python
python实现图像识别功能
2018/01/29 Python
django url到views参数传递的实例
2019/07/19 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
最新大学职业规划书范文
2013/12/30 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
高三霸气励志标语
2014/06/24 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
财务人员岗位职责
2015/02/03 职场文书