原生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 输入框内容格式验证代码
Feb 11 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php实现的二分查找算法示例
2017/06/20 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
深入了解js原型模式
2019/05/30 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Python调用C语言程序方法解析
2020/07/07 Python
python 实现端口扫描工具
2020/12/18 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
升旗仪式演讲稿
2014/05/08 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
教师自荐信范文
2015/03/06 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python