原生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 相关文章推荐
javascript for循环设法提高性能
Feb 24 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
jquery validate表单验证插件
Sep 06 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 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中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php json相关函数用法示例
2017/03/28 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
详解redux异步操作实践
2018/08/15 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
Python程序语言快速上手教程
2012/07/18 Python
python django集成cas验证系统
2014/07/14 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
使用Python对MySQL数据操作
2017/04/06 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
Python创建字典的八种方式
2019/02/27 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python如何保证输入键入数字的方法
2019/08/23 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
早读迟到检讨书
2014/01/24 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
党员个人总结自评
2015/02/14 职场文书
党支部审查意见
2015/06/02 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书