电商网站商品放大镜功能、选项卡功能案例详解
实现功能
1、选择下标小图，图片显示区出现对应的图片
2、鼠标移入图片显示区时出现放大镜，放大部分出现在右侧
3、点击前进后退的按钮，可将更多的图片显示出来
效果展示
方法一：面向对象实现
<body>
<div id="box" >
<!--正常显示图片区域-->
<div id="small">
<ol id="top">
<li style="display: block;" id="smallImg" class="a1"><img src="p01.jpg" /></li>
<li class="a2"><img src="p02.jpg" id="smallImg"/></li>
<li class="a3"><img src="p03.jpg" id="smallImg"/></li>
<li class="a4"><img src="p04.jpg" id="smallImg"/></li>
<li class="a2"><img src="p05.jpg" id="smallImg"/></li>
<li class="a3"><img src="p06.jpg" id="smallImg"/></li>
<li class="a4"><img src="p07.jpg" id="smallImg"/></li>
<li class="a4"><img src="p08.jpg" id="smallImg"/></li>
</ol>
<div id="mask"></div>
</div>
<!--放大后展示区域-->
<div id="big">
<ul id="bigImg">
<li class="b1" ><img src="bp1.jpg" /></li>
<li class="b2" ><img src="bp2.jpg" /></li>
<li class="b3" ><img src="bp3.jpg" /></li>
<li class="b4" ><img src="bp4.jpg" /></li>
<li class="b1" ><img src="bp5.jpg" /></li>
<li class="b2" ><img src="bp6.jpg" /></li>
<li class="b3" ><img src="bp7.jpg" /></li>
<li class="b4" ><img src="bp8.jpg" /></li>
</ul>
</div>
<!--小图展示区域-->
<div id="uu">
<ul id="bottom">
<li style="border: 1px solid red;"><img src="p1.jpg"/></li>
<li><img src="p2.jpg"/></li>
<li><img src="p3.jpg"/></li>
<li><img src="p4.jpg"/></li>
<li><img src="p5.jpg"/></li>
<li><img src="p6.jpg"/></li>
<li><img src="p7.jpg"/></li>
<li><img src="p8.jpg"/></li>
</ul>
</div>
//点击往前滑
<a id="prev" href="javascript:"><</a>
//点击往后滑
<a id="next" href="javascript:">></a>
</div>
</body>
<script>
function Magnifie(){
this.ulist = $id("bottom").children;
this.olist = $id("top").children;
this.bigImg = $id("bigImg");
this.smallImg = $id("samllImg");
this.small = $id("small");
this.mask = $id("mask");
this.big = $id("big");
this.box = $id("box");
this.blist = $id("bigImg").children;
this.index = 0;
this.prev = $id("prev");
this.next = $id("next");
this.ul = $id("bottom")
this.uuW =$id("uu").offsetWidth
this.num = 0;
//设置选项卡函数，将小图选中，增加其样式，正常显示区出现对应的图片
this.TabCar = function(){
for(let i = 0 ; i < this.ulist.length ; i++){
this.ulist[i].onmouseenter = function(){
for(let j = 0 ; j < this.olist.length ; j++){//清除所有样式
this.olist[j].style.display = "none";
this.blist[j].style.display = "none";
this.ulist[j].style.border = "none"
}
//为选中的li增加样式，并在各个区域显示对应的图片
this.olist[i].style.display = "block";
this.blist[i].style.display = "block";
this.blist[i].style.display = "1px solid red";
this.index = i;
}.bind(this)//有事件触发注意改变this指向
}
//多函数一定要注意返回this
return this；
}
//设置入口函数，放大镜的移入移出
this.init = function(){
//设置鼠标移入事件
//移入显示放大区域、放大区域显示对应图片
this.small.onmouseover = function(){
this.mask.style.display = "block";
this.big.style.display = "block";
this.blist[this.index].style.display = "block";
}.bind(this)
//设置鼠标移出事件
//移出隐藏放大区域、放大区域
this.small.onmouseout = function(){
this.mask.style.display = "none";
this.big.style.display = "none";
}.bind(this)
return this;
}
//设置鼠标移动函数
this.fnMousemove = function(){
this.small.onmousemove = function(evt){
//获取放大区域的宽度（遮罩层宽度）
this.maskWidth = this.mask.offsetWidth;
//获取正常显示图的宽度和高度
this.smallImagWidth = this.olist[this.index].offsetWidth;
this.smallImagHeight = this.olist[this.index].offsetHeight;
//获取大图宽度
this.bigImgWidth = this.blist[this.index].offsetWidth;
this.bigImgHeight = this.blist[this.index].offsetHeight;
//获取放大显示区宽度
this.bigWidth = this.big.offsetWidth;
//功能一：操作mask跟随鼠标移动
var e = evt = event;
let x = e.pageX - this.mask.offsetWidth / 2 - this.box.offsetLeft;
let y = e.pageY - this.mask.offsetHeight / 2 - this.box.offsetTop;
//获取mask的醉的left和top值
let maxL = this.smallImgWidth - this.maskWidth;
let maxT = this.small.offsetHeight - this.mask.offsetHeight;
//边界处理
//当值小于0时取0，当值大于maxL是取maxL，两者之间去x
x = Math.min(Math.max(0,x),maxL);
y = Math.min(Math.max(0,y),maxY);
//改变绝对属性的属性值让mask移动
this.mask.style.left = x + "px";
this.mask.style.top = y + "px";
//功能二：操作大图的移动---设置大图的left和top值
//获取大图的left和top值
let bigImgLeft = x * this.bigImgWidth / this.smallImgWidth;
let bigImgTop = y * this.bigImgWidth / this.smallImgWidth;
//设置大图的left和top值
this.blist[this.index].style.left = - bigImgLeft + "px";
this.blist[this.index].style.top = -bigImgTop + "px";
}.bind（this）
return this ;
}
//功能三：点击按钮实现下一张图片的加载
//实现思路
//在div（position：relative）放置ul（position：absolute），让ul中的li水平排放（左右轮播），将div宽度固定并设置（overflow：hidden），改变ul的left值，则实现轮播
this.ClickPlay = function(){
this.prev.onclick = function(){
this.num --
if(this.num <= 0){
this.num = 0;
}
//调用运动函数
startMove(this.ul , {left : -this.num*this.uuW})
}.bind(this)
this.next.onclick = function(){
this.num++;
if( this.num >= 5){
this.num = 1;
}
startMove(this.ul , {left : -this.num*this.uuW})
}.bind(this)
}
}
</script>