介绍
<脚本>//①整个案例可以分为三个功能模块//②鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开- ->隐藏2个盒子功能//③黄色的遮挡层跟随鼠标功能。//④移动黄色遮挡层,大图片跟随移动功能。//事件源:
var box1=document.querySelector (“.box1”);
var bg=document.querySelector (“.box1_bg”);
var=大document.querySelector (“.big_img”);//1。鼠标经过盒子的时候,显示遮罩层和放大镜
box1.addEventListener(鼠标悬停,函数(){
bg.style。显示=翱椤?
big.style。显示=翱椤?
})//2。鼠标离开盒子的时候,隐藏遮罩层和放大镜
box1.addEventListener (mouseout,函数(){
bg.style。显示='没有';
big.style。显示='没有';
})//2 .鼠标移动的时候
box1.addEventListener (mousemove,函数(e) {
var x=e。pageX - this.offsetLeft;//x是鼠标到父盒子x距离
var y=e。pageY - this.offsetTop;//y是鼠标到父盒子y距离//控制台。日志(x, y)//最大移动距离,box1盒子的大小减去遮罩层的盒子大小
var max_x=box1。offsetWidth - bg.offsetWidth;
var max_y=box1。offsetHeight - bg.offsetHeight;
如果(max_x>=0)//*将坐标减去遮罩层盒子的一半鼠标就落到遮罩层的中间//移动距离X, Y
var X=X - bg.offsetWidth/2;
var Y=Y - bg.offsetHeight/2;//*当遮罩层超出box1的边框的时候,设一个边界卡住它
如果(X <=0) {
X=0
}else if (X>=max_x) {
X=max_x;
}
如果(Y <=0) {
Y=0
}else if (Y>=max_y) {
Y=max_y;
}//*把鼠标在盒子内的坐标给遮罩层实现跟随鼠标移动效果//注意加不上px然不起效果
bg.style。左=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——大。offsetWidth;
var big_img_y=big_img。offsetWidth——大。offsetWidth;//bigX大图片的移动距离
var bigX=X * big_img_x/max_x;
var bigY=Y * big_img_y/max_x;
big_img.style。左=-bigX +“px”;
big_img.style。顶级=-bigY +“px”;
})> 小编给大家分享一下js要如何实现仿京东放大镜的效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
1,效果1:鼠标经过前
2,效果2:鼠标放上去,弹出右边放大镜
3,效果3:鼠标在小盒子移动,放大镜跟着移动
4,源代码如下:
& lt; !DOCTYPE html> & lt; html lang=癳n"祝辞 & lt; head> & lt;元charset=癠TF-8"祝辞 & lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比; & lt; title> Document & lt; style>/*清除默认样式*/* { 保证金:0; 填充:0; }/*左边小盒子样式*/.box1 { 位置:相对; 宽度:450 px; 身高:450 px; 边界:1 px固体# 999; margin-left: 80 px; margin-top: 50 px; } .box1 .img1 {/*设置左边图片大小*/宽度:450 px; }/*遮罩层bg的样式*/.box1_bg {/*一开始要隐藏起来*/显示:没有; 位置:绝对的; 上图:0; 左:0; 宽度:300 px; 身高:300 px; 背景颜色:黄色;/*透明效果*/透明度:5; 光标:移动; }/*右边大盒子样式*/.big_img {/*一开始要隐藏起来*/显示:没有; 宽度:540 px; 身高:540 px; 位置:绝对的; 上图:0; 左:470 px; 边界:1 px固体# 999; 溢出:隐藏; }/*大盒子里面的图片样式*/.big_img .big_imgs { 位置:绝对的; 上图:0; 左:0; 宽度:800 px; } & lt;/style> & lt;/head> & lt; body> & lt; div类=癰ox1"祝辞 & lt; img类=癷mg1"src=https://www.yisu.com/zixun/巴枷?2 - 1. - jpg”alt=" # ">