原生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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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和ACCESS写聊天室(三)
2006/10/09 PHP
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
php常用表单验证类用法实例
2015/06/18 PHP
JS动态调用方法名示例介绍
2013/12/18 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
Python中logging.NullHandler 的使用教程
2018/11/29 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
python接口自动化框架实战
2020/12/23 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
银行优秀员工事迹材料
2014/05/29 职场文书
卖房授权委托书样本
2014/10/05 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
旅游项目合作意向书
2015/05/08 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL