电商网站商品放大镜功能、选项卡功能案例详解
2019-06-25 23:00
411 查看
电商网站商品放大镜功能、选项卡功能案例详解
实现功能
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>
相关文章推荐
- 电商网站后台九大功能模块详解
- 大型PHP电商网站商品秒杀功能实现思路分析
- 快速入门案例实战之电商网站商品管理:嵌套聚合,下钻分析,聚合分析
- 大型PHP电商网站商品秒杀功能实现思路分析 技术角度称为:高可用 高并发
- 电商网站后台九大功能模块详解
- 电商网站中添加商品到购物车功能模块2017.12.8
- 电商网站首页商品分类列表功能实现
- 电商问题之客户端访问网站图片详解
- 电商网站购物车功能分析与实现
- 大型网站架构系列:电商网站架构案例
- 电商网站开发记录(三) Spring的引入,以及配置详解
- Scrapy爬取电商网站京东奶粉商品价格数据-附各种问题解决
- python数据分析与挖掘学习笔记(6)-电商网站数据分析及商品自动推荐实战与关联规则算法
- 大型网站架构系列:电商网站架构案例(3)
- Android开发之TextView中间设置横线,适用于电商项目,商品原价之类的功能。
- [转]大型网站架构系列:电商网站架构案例(1)
- 大型网站架构系列:电商网站架构案例(1)
- 如何一步一步用DDD设计一个电商网站(四)—— 把商品卖给用户
- Android - TabHost 选项卡功能用法详解
- 大型网站架构系列:电商网站架构案例