原生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中的float运算精度实例分析
Aug 21 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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数据库操作Helper类完整实例
2016/05/11 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
实例讲解Python3中abs()函数
2019/02/19 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Python获取时间戳代码实例
2019/09/24 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
python 基于wx实现音乐播放
2020/11/24 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
资深地理教师自我评价
2013/09/21 职场文书
园林施工员岗位职责
2013/12/11 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
小学生倡议书范文
2014/05/13 职场文书
代理人委托书
2014/08/01 职场文书
实验心得体会范文
2016/01/25 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL