JavaScript实现京东放大镜效果
更新时间：2019年12月03日 08:49:56 作者：空谷丶幽兰
这篇文章主要为大家详细介绍了JavaScript实现京东放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现京东放大镜展示的具体代码，供大家参考，具体内容如下
实现效果：
1.鼠标放到图片上显示放大镜和详细图，鼠标离开时什么都不显示（效果消失）
2.鼠标一直在放大镜的中间，且放大镜随鼠标移动
3.放大镜不能出缩列图的盒子
4.鼠标放在详细图上详细图消失
实现细节：
1.大盒子虽然比详细图的盒子宽度小，但是在逻辑上详细图的盒子属于大盒子
2.详细图不能使用浮动，因为盒子下面一般会有文字内容
3.以父盒子来定位详细图的盒子
4.放大镜鼠标选中为十字形
5.对图片进行定位才能使图片移动
6.使用var evt = event || window.event; //兼容性写法
7.用放大镜顶点在盒子中的位置根据比例找到图片的位置，来显示图片
8.图片在详细图中的定位为负值
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东放大镜</title>
<style>
.box{ /*大盒子虽然比详细图的盒子宽度小，但是在逻辑上详细图的盒子属于大盒子*/
width: 350px;
height: 350px;
position: relative;
margin: 100px;
border: 1px solid #aaa;
}
.box .detailed{ /*详细图不能使用浮动，因为盒子下面一般会有文字内容*/
width: 450px;
height: 450px;
border: 1px solid #aaa;
position: absolute;
overflow: hidden;
left: 365px; /*以父盒子来定位*/
top: 0;
/*初始设置为不可见*/
display: none;
}
.box .normal .magnfier{
width: 150px;
height: 150px;
top: 0;
left: 0;
position: absolute;
background-color: rgba(0, 0, 255, 0.2);/*也可以用opacity来设置透明度*/
cursor: move; /*鼠标选中为十字*/
display: none; /*初始设为不可见*/
}
.detailed img{ /*对图片进行定位使图片移动*/
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
function $(id){
return document.getElementById(id);
}
window.onload = function(){
var box = $('box');
var normal = box.children[0];
var margnfier = normal.children[1];//获取放大镜的Dom对象，document.getElementsByClassName来获取。
var detailed = box.children[1];//获得缩略图DOM对象也可以用document.getElementsByClassName('zoom')[0];
var detailedImg = box.children[1].children[0];
normal.onmouseover = function(){//不能给box注册onmousever事件，否则快速移到详细图上是详细图也不会消失，
margnfier.style.display = 'block';
detailed.style.display = 'block';
}
normal.onmouseout = function(){
margnfier.style.display = 'none';
detailed.style.display = 'none';
}
var x = 0;
var y = 0;
//控制zoom放大镜部分在normal里面的移动
normal.onmousemove = function(event){
var evt = event || window.event;
//兼容性写法
x = evt.clientX - box.offsetLeft - margnfier.offsetWidth / 2;
y = evt.clientY - box.offsetTop - margnfier.offsetHeight / 2;
//判断鼠标是不是溢出了normal的区域，
if(x < 0){
x = 0;
}else{
if(x > box.offsetWidth - margnfier.offsetWidth){
x = box.offsetWidth - margnfier.offsetWidth;
}
}
if(y < 0){
y = 0;
}else{
if(y > box.offsetHeight - margnfier.offsetHeight){
y = box.offsetHeight - margnfier.offsetHeight;
}
}
margnfier.style.left = x + 'px';
margnfier.style.top = y + 'px';
var detailedX = -x * 800 / this.offsetWidth;
var detailedY = -y * 800 / this.offsetHeight;
//用放大镜顶点在盒子中的位置根据比例找到图片的位置，来显示图片
//改变图片位置
detailedImg.style.left = detailedX + 'px';
detailedImg.style.top = detailedY + 'px';
}
}
</script>
</head>
<body>
<div id="box" class="box"> <!--包含详细图和缩略图的盒子-->
<div class="normal">
<img src="imgs/show.jpg" alt="">
<div class="magnfier"></div>
</div>
<div class="detailed">
<img src="imgs/detail.jpg" alt="">
</div>
</div>
</body>
</html>
更多关于放大镜的效果，请查看专题：《放大镜特效》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
字符串标签函数是一种特殊的函数调用语法，本文将深入探讨ES6中字符串标签函数的工作原理，并结合具体的代码展示它的威力，快跟随小编一起学习起来吧2023-06-06
这篇文章主要为大家详细介绍了js实现随机点名程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要介绍了JS动态添加的div点击跳转到另一页面实现代码,需要的朋友可以参考下2017-09-09
这篇文章主要为大家详细介绍了js图片无缝滚动插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
在一些注册类的网站，经常遇到这样的需求，点击发送验证码，xx秒后重新发送，这样的功能怎么实现呢，接下来通过本文给大家分享js点击发送验证码 xx秒后重新发送功能，需要的朋友参考下吧2019-07-07
这篇文章主要介绍了JS实现模糊查询带下拉匹配效果,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了JS得到当前时间的方法,结合具体实例形式对比分析了javascript获取日期时间的相关操作技巧,需要的朋友可以参考下2017-03-03
想要实现如题所示:父窗体需要顶一个show()方法，具体实现代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
本文主要给大家详细总结了下javascript中的运算符，包括常见的算数运算符、比较运算符和逻辑运算符。十分的清晰，有需要的小伙伴可以参考下。2015-06-06
javaScript 中的 call() 是一个奇妙的方法，但也是一个让人迷惑的方法，先看一下官方的解释。2010-04-04
最新评论