原生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 相关文章推荐
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 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
探讨捕获php错误信息方法的详解
2013/06/09 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
详细探究Python中的字典容器
2015/04/14 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
详解python eval函数的妙用
2017/11/16 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
Django 限制访问频率的思路详解
2019/12/24 Python
Python hashlib模块实例使用详解
2019/12/24 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
浅析Python 责任链设计模式
2020/09/11 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
英语专业自荐书
2014/06/13 职场文书
安全口号大全
2014/06/21 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
靠谱的活动总结
2019/04/16 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
Python中的 Set 与 dict
2022/03/13 Python
Golang map映射的用法
2022/04/22 Golang