电商网站商品放大镜功能、选项卡功能案例详解

曾经终败给现在 2021-12-23 06:59 375阅读 0赞

## 电商网站商品放大镜功能、选项卡功能案例详解 ##

实现功能  
1、选择下标小图，图片显示区出现对应的图片  
2、鼠标移入图片显示区时出现放大镜，放大部分出现在右侧  
3、点击前进后退的按钮，可将更多的图片显示出来  
**效果展示**

![案例效果图展示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]方法一：面向对象实现

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20211223/11b7851d49c54655a14804f1cd88fd01.png