好资源导航 » 文章资讯 » 原生js实现淘宝放大镜效果

原生js实现淘宝放大镜效果

2023-09-06 05:46:05 50

大家经常逛淘宝、天猫、京东这类网站的时候往往会看到一些图片展示的效果，例如：把鼠标放在图片上右侧会出现一个放大的预览区域，这就是所谓放大镜效果。今天闲着没事干，就打算复习一下JavaScript基础，用一下基础知识制作一个类似于淘宝的放大镜效果。

先说一下这个效果需要用到的一些基础知识：

css相对定位：position：absolute；

鼠标移入移出以及移动事件：onmouseover、onmouseout、onmousemove，记住这些事件一般不会单个出现

获取鼠标点击坐标：X轴：clientX，Y轴：clientY

当前元素相对于父元素的左位移：offsetLeft

当前元素相对于父元素的上位移：offsetTop

当前元素的实际高、宽度（不包括滚动条）：offsetWidth、offsetHeight

球当前元素的最小值，最大值：Math.min()、Math.max()；

话不多说直接上代码吧！





放大镜效果

*{
padding:0;
margin:0;
}
#demo{
display:block;
width:400px;
height:255px;
margin:50px;
position:relative;
border:1pxsolid#ccc;
}
#float-box{
position:relative;
z-index:1;
}
#small-box{
display:none;
width:160px;
height:120px;
position:absolute;
background:#ffffcc;
border:1pxsolid#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:1pxsolid#ccc;
z-index:1;


}
#big-boximg{
position:absolute;
z-index:5;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

原生js实现淘宝放大镜效果

热门推荐

随机推荐