原生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在网页中实现分隔条功能的代码
Aug 09 Javascript
js indexOf()定义和用法
Oct 21 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
vue实例的选项总结
Jun 09 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
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
Python守护进程用法实例分析
2015/06/04 Python
浅谈Django的缓存机制
2018/08/23 Python
Pyqt5自适应布局实例
2019/12/13 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Python如何根据时间序列数据作图
2020/05/12 Python
python实现mean-shift聚类算法
2020/06/10 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
司机的工作范围及职责
2013/11/13 职场文书
大学生先进事迹材料
2014/02/16 职场文书
林肯就职演讲稿
2014/05/19 职场文书
司机工作自我鉴定
2014/09/19 职场文书
个性与发展自我评价
2015/03/06 职场文书
警告通知
2015/04/25 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
丧事答谢词大全
2015/09/30 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL