原生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 Firefox与IE 替换节点的方法
Feb 24 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
Three.js学习之几何形状
Aug 01 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
vue router 组件的高级应用实例代码
Apr 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
php 结果集的分页实现代码
2009/03/10 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
PHP之header函数详解
2021/03/02 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
python查看FTP是否能连接成功的方法
2015/07/30 Python
python数据结构之列表和元组的详解
2017/09/23 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
质量负责人任命书
2014/06/06 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
大学辅导员述职报告
2015/01/10 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书