Electricity supplier website merchandise magnifying glass feature, tab function Detailed Case
Realize the function
1, the subscript selection panel, the display image corresponding to the image zone in
2, when the mouse moved into the image magnifier zone, the display appears in the right enlarged portion
3, the forward backward button click, more pictures can be displayed
Show results
Method a: Object-oriented implementation
<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>