原生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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
js中split和replace的用法实例
Feb 28 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
vue新建项目并配置标准路由过程解析
Dec 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
无需数据库在线投票调查php代码
2016/07/20 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
python实现提取百度搜索结果的方法
2015/05/19 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
什么是TCP/IP
2014/07/27 面试题
英语专业个人求职自荐信
2013/09/21 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
排查整治工作方案
2014/06/09 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
Python利用zhdate模块实现农历日期处理
2022/03/31 Python