JavaScript实现京东购物放大镜和选项卡效果的方法分析
程序员文章站
2023-11-03 22:08:34
本文实例讲述了javascript实现京东购物放大镜和选项卡效果的方法。分享给大家供大家参考，具体如下：
购物网站点击商品后，都会有一个查看物品图片，并且可以放大仔细观察...
本文实例讲述了javascript实现京东购物放大镜和选项卡效果的方法。分享给大家供大家参考，具体如下：
购物网站点击商品后，都会有一个查看物品图片，并且可以放大仔细观察物品的功能。这个功能看起来复杂，其实实现起来非常简单。下面我们来一起做这个小效果吧！
首先，我们看一下页面的布局：
1.小图片显示区，上面有一个方形遮罩层
2.缩略图横向列表
3.大图显示区域
然后，我们写出开发步骤：
1.编写3个区域的html布局，使他们位于同一个容器内
2.显示区域2的图片列表
3.给区域2的图片添加mouseover事件，使图片显示在区域1内
4.鼠标移入区域1，生成半透明的选择框
5.区域3显示区域2选择框对应的图片位置放大的效果
6.鼠标移除区域2，区域3隐藏
最后，根据需求写出相应代码：
html和css：
<style>
ul{
list-style: none;
padding: 0;
}
.zoom-box{
position: relative;
width: 452px;
}
.small-box{
border: 1px solid #ccc;
position: relative;
}
.small-box .square{
position: absolute;
background-color: yellow;
opacity: 0.5;
display: none;
}
.small-box .mask{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top:0;
left:0;
}
.img-list ul:after{
clear: both;
content: '';
display: table;
}
.img-list ul li{
float: left;
padding: 0 8px;
}
.img-list img{
border: 2px solid transparent;
}
.img-list img.active{
border: 2px solid red;
}
.big-box{
position: absolute;
top:0;
left: 100%;
margin-left: 2px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
display: none;
overflow: hidden;
}
.big-box img{
position: absolute;
}
</style>
</head>
<body>
<div class="zoom-box">
<div class="small-box">
<img src="../../../img/京东放大镜/m1.jpg" alt="">
<div class="square">
</div>
<div class="mask"></div>
</div>
<div class="img-list">
<ul>
<li><img class="active" src="../../../img/京东放大镜/s1.jpg" alt="" data-small="../../../img/京东放大镜/m1.jpg"
data-big="../../../img/京东放大镜/b1.jpg"></li>
<li><img src="../../../img/京东放大镜/s2.jpg" alt="" data-small="../../../img/京东放大镜/m2.jpg"
data-big="../../../img/京东放大镜/b2.jpg"></li>
<li><img src="../../../img/京东放大镜/s3.jpg" alt="" data-small="../../../img/京东放大镜/m3.jpg"
data-big="../../../img/京东放大镜/b3.jpg"></li>
<li><img src="../../../img/京东放大镜/s4.jpg" alt="" data-small="../../../img/京东放大镜/m4.jpg"
data-big="../../../img/京东放大镜/b4.jpg"></li>
<li><img src="../../../img/京东放大镜/s5.jpg" alt="" data-small="../../../img/京东放大镜/m5.jpg"
data-big="../../../img/京东放大镜/b5.jpg"></li>
<li><img src="../../../img/京东放大镜/s6.jpg" alt="" data-small="../../../img/京东放大镜/m6.jpg"
data-big="../../../img/京东放大镜/b6.jpg"></li>
</ul>
</div>
<div class="big-box">
<img src="../../../img/京东放大镜/b1.jpg" alt="">
</div>
</div>
js代码：
<script>
var smallbox=$('.small-box .mask');
var smallimg=$('.small-box img');
var square=$('.square');
var imageslist=$all('.img-list img');
var bigbox=$('.big-box');
var bigimg=$('.big-box img');
//选项卡切换
for(var i=0;i<imageslist.length;i++){
imageslist[i].onmouseover=function () {
for (var j=0;j<imageslist.length;j++){
imageslist[j].classname='';
}
this.classname='active';
bigimg.src=this.getattribute('data-big');
smallimg.src=this.getattribute('data-small');
}
}
//鼠标移进事件
smallbox.onmouseover=function () {
square.style.display='block';
bigbox.style.display='block';
//利用比例公式计算square的宽高
//square的宽/smallimg的宽 = bigbox的宽/bigima的宽
square.style.width=smallimg.offsetwidth * bigbox.offsetwidth / bigimg.offsetwidth + 'px';
square.style.height=smallimg.offsetheight * bigbox.offsetheight / bigimg.offsetheight + 'px';
};
//鼠标移出事件
smallbox.onmouseout=function () {
square.style.display='none';
bigbox.style.display='none';
};
//鼠标移动事件
smallbox.onmousemove=function (e) {
var e=e||window.event;
var x,y;
//x和y的坐标
x=e.offsetx-square.offsetwidth/2;
y=e.offsety-square.offsetheight/2;
if(x<0){
x=0;
}
if(x>smallbox.offsetwidth-square.offsetwidth){
x=smallbox.offsetwidth-square.offsetwidth;
}
if(y<0){
y=0;
}
if(y>smallbox.offsetheight-square.offsetheight){
y=smallbox.offsetheight-square.offsetheight;
}
square.style.left=x+'px';
square.style.top=y+'px';
//利用公式计算大图的坐标
//<!--// x/?=smallimg.w/bigimg.w-->
//<!--// y/?=smallimg.h/bigimg.h-->
bigimg.style.left=-x * bigimg.offsetwidth / smallimg.offsetwidth + 'px';
bigimg.style.top=-y * bigimg.offsetheight / smallimg.offsetheight + 'px';
};
function $(name) {
return document.queryselector(name);
}
function $all(name) {
return document.queryselectorall(name);
}
</script>
大家可以做一下看看效果：
添加一个mask的div是因为，如果直接在smallbox上添加事件，会受到其中的子元素的影响，导致图片抖动。而对一个空内容的mask操作就不会有影响了。
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript图片操作技巧大全》、《javascript运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。