原生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 相关文章推荐
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
JavaScript之数组扁平化详解
Jun 03 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调用MySQL的存储过程的实现代码
2008/08/12 PHP
php auth_http类库进行身份效验
2009/03/19 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
PHP在线书签系统分享
2016/01/04 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
什么是数据抽象
2016/11/26 面试题
资料员的岗位职责
2013/11/20 职场文书
消防工作实施方案
2014/06/09 职场文书
综治维稳工作汇报
2014/10/27 职场文书
热血教师观后感
2015/06/10 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS
python语言中pandas字符串分割str.split()函数
2022/08/05 Python