js仿京东放大镜效果
更新时间：2020年08月09日 11:09:06 作者：foreverどL
这篇文章主要为大家详细介绍了js仿京东放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js仿京东放大镜效果的具体代码，供大家参考，具体内容如下
1、效果1：鼠标经过前
2、效果2：鼠标放上去，弹出右边放大镜
3、效果3：鼠标在小盒子移动，放大镜跟着移动
4、源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默认样式 */
*{
margin: 0;
padding: 0;
}
/* 左边小盒子样式 */
.box1{
position: relative;
width: 450px;
height: 450px;
border: 1px solid #999;
margin-left: 80px;
margin-top: 50px;
}
.box1 .img1{
/* 设置左边图片大小 */
width: 450px;
}
/* 遮罩层bg的样式 */
.box1_bg{
/* 一开始要隐藏起来 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: yellow;
/* 透明效果 */
opacity: .5 ;
cursor: move;
}
/* 右边大盒子样式 */
.big_img{
/* 一开始要隐藏起来 */
display: none;
width: 540px;
height: 540px;
position: absolute;
top: 0;
left: 470px;
border: 1px solid #999;
overflow: hidden;
}
/* 大盒子里面的图片样式 */
.big_img .big_imgs{
position: absolute;
top: 0;
left: 0;
width: 800px;
}
</style>
</head>
<body>
<div class="box1">
<img class="img1" src="images/2-1.jpg" alt="#" >
<div class="box1_bg"></div>
<div class="big_img">
<img class="big_imgs" src="images/2.jpg" alt="#" >
</div>
</div>
<!-- JS代码如下 -->
<script>
// ①整个案例可以分为三个功能模块
// ②鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开-->隐藏2个盒子功能
// ③黄色的遮挡层 跟随 鼠标功能。
// ④移动黄色遮挡层,大图片跟随移动功能。
// 事件源：
var box1 = document.querySelector('.box1');
var bg = document.querySelector('.box1_bg');
var big = document.querySelector('.big_img');
// 1. 鼠标 经过 盒子的时候，显示 遮罩层 和 放大镜
box1.addEventListener('mouseover',function(){
bg.style.display = 'block';
big.style.display = 'block';
})
// 2. 鼠标 离开 盒子的时候，隐藏 遮罩层 和 放大镜
box1.addEventListener('mouseout',function(){
bg.style.display = 'none';
big.style.display = 'none';
})
// 2.鼠标移动的时候
box1.addEventListener('mousemove',function(e){
var x = e.pageX - this.offsetLeft; // x是鼠标到父盒子x距离
var y = e.pageY - this.offsetTop; // y是鼠标到父盒子y距离
// console.log(x ,y)
// 最大移动距离，box1盒子的大小 减去 遮罩层的盒子大小
var max_x = box1.offsetWidth - bg.offsetWidth;
var max_y = box1.offsetHeight - bg.offsetHeight;
if( max_x >=0 )
// *将坐标减去 遮罩层盒子的一半 鼠标就落到遮罩层的中间
// 移动距离X,Y
var X = x - bg.offsetWidth/2;
var Y = y - bg.offsetHeight/2;
// *当遮罩层超出 box1 的边框的时候，设一个边界卡住它
if(X <= 0 ){
X = 0
}else if( X >= max_x){
X = max_x;
}
if(Y <= 0 ){
Y=0
}else if( Y >= max_y){
Y = max_y;
}
// *把鼠标在盒子内的坐标给 遮罩层 实现跟随鼠标移动效果
// 注意加上 px 不然不起效果
bg.style.left = X +'px';
bg.style.top = Y +'px';
// 右边图片跟随移动，有一个小算法：big_img_x
// 遮挡层移动距离（X）/遮挡层最大移动距离（max_x）=大图片移动距离（bigX)/大图片移动的最大距离（big_img_x)
// 获取 图片 事件源
var big_img = document.querySelector('.big_imgs');
// big_img_x 求大图片移动的最大距离 正方形 距离一样的
var big_img_x = big_img.offsetWidth - big.offsetWidth ;
var big_img_y = big_img.offsetWidth - big.offsetWidth ;
// bigX 大图片的移动距离
var bigX = X * big_img_x / max_x ;
var bigY = Y * big_img_y / max_x ;
big_img.style.left = -bigX +'px';
big_img.style.top = -bigY +'px';
})
</script>
</body>
</html>
5、喜欢的话记得点赞 收藏 关注噢~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
IE8 下的Js错误HTML Parsing Error...
今天调试一段JS代码出现这个状况..在火狐 IE7 和IE6下都正常...郁闷,在网上搜索了一下相关资料 一般错误都是指所指定的标签没有加载完就是用该对象....2009-08-08
在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中，两个dll的交互是比较耗时的，优化对Dom的操作可以提高脚本的执行速度。本文是对如何优化的一些总结。下面跟着小编一起来看下吧2017-01-01
es6中class类静态方法，静态属性，实例属性，实例方法的理解与应用分析
这篇文章主要介绍了es6中class类静态方法，静态属性，实例属性，实例方法的理解与应用,结合实例形式分析了es6 class类静态方法，静态属性，实例属性，实例方法相关概念、原理、用法及相关操作注意事项,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了JS实现打字游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要为大家详细介绍了laydate日历控件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
下面小编就为大家带来一篇基于JavaScript表单脚本(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
console.log 原先是 Firefox 的 专利 ，严格说是安装了 Firebugs 之后的 Firefox 所独有的调试 绝招2012-05-05
实现table排序，网上有很多解决方案，很多都基于jQuery，最后我选择用sortElements，实现很简单2014-05-05
本篇文章主要介绍了ionic 3.0+ 项目搭建运行的教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
如果我们需要比较两个数组是否相等，不能像比较基本类型(String、Number、Boolean等)一样，使用 === (或 ==) 来判断，所以如果要比较数组是否相等，需要使用一些特殊方法。本文为大家整理了四种常见用法，需要的可以参考一下2023-02-02
最新评论