js仿京东放大镜效果
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要为大家详细介绍了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-: 50px; } .box1 .img1{ /* 设置左边图片大小 */ width: 450px; } /* 遮罩层bg的样式 */ .box1_bg{ /* 一开始要隐藏起来 */ display: none; position: absolute; : 0; left: 0; width: 300px; height: 300px; background-color: yellow; /* 透明效果 */ opacity: .5 ; cursor: move; } /* 右边大盒子样式 */ .big_img{ /* 一开始要隐藏起来 */ display: none; width: 540px; height: 540px; position: absolute; : 0; left: 470px; border: 1px solid #999; overflow: hidden; } /* 大盒子里面的图片样式 */ .big_img .big_imgs{ position: absolute; : 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. = 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. = -bigY +'px'; }) </script> </body> </html>
5、喜欢的话记得点赞 收藏 关注噢~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程