(编辑:jimmy 日期: 2024/12/23 浏览:2)
本文实例为大家分享了js实现放大镜组件开发的具体代码,供大家参考,具体内容如下
功能需求:
1、根据图片数组创建图标列表;
2、鼠标滑过图标时,当前图标增加红色边框;
3、鼠标滑过图标时,上方图片区域显示对应的图片,右侧显示放大后的图片内容;
4、鼠标在图片区域移动时,在右侧实现放大效果;
5、下方图标列表,点击左右按钮,实现翻页效果;
6、当图标内容不够一页时,只移动到最后一个图标的位置;
以京东的详情页为例,看一下效果:
放大镜内容写在 Zoom.js 文件里,下方的图标列表内容写在 IconList.js 文件里,当鼠标滑过下面的图标时,需要更改放大镜里div的背景图片,这里用到了事件抛发。
下面附上代码:
html结构 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>zoom</title> </head> <body> <script type="module"> import Zoom from './js/Zoom.js'; //图标数组 let list=["a_icon.jpg","e_icon.jpg","f_icon.jpg","g_icon.jpg","h_icon.jpg","i_icon.jpg","j_icon.jpg",]; init(); function init(){ let zoom=new Zoom(list,"./img/"); zoom.appendTo("body"); } </script> </body> </html>
Zoom.js文件,创建放大镜组件:
import Utils from "./Utils.js"; import IconList from './IconList.js'; export default class Zoom{ static styles=false; static small_width=450; static mask_width=303.75; static zoom_width=540; static SET_BG_IMG="set_bg_img"; constructor(_list,_basePath){ if(_basePath) _list=_list.map(item=>_basePath+item); //创建外层的div容器 this.elem=this.createE(); //监听事件,改变zoomSmall的背景图 document.addEventListener(Zoom.SET_BG_IMG,e=>this.setBgImg(e)); //创建下方的icon列表 this.createIconList(_list,this.elem); } createE(){ //创建外层div容器 let div=Utils.createE("div"); div.className="zoomContainer"; div.innerHTML=`<div class="zoomSmall" id="zoomSmall"><div class="zoomMask" id="zoomMask"></div></div> <div class="zoomContent" id="zoomCont"></div>`; //设置样式 Zoom.setStyle(); //获取样式 Utils.getIdElem(div,this); //监听鼠标滑入事件 this.zoomSmall.addEventListener("mouseenter",e=>this.mouseHandler(e)); return div; } appendTo(parent){ Utils.appendTo(this.elem,parent); } setBgImg(e){ //设置背景图片 this.zoomSmall.style.backgroundImage=`url(${e.src})`; this.zoomCont.style.backgroundImage=`url(${e.src})`; } createIconList(list,parent){ //创建下方icon图标列表 let iconList=new IconList(list); Utils.appendTo(iconList.elem,parent); } mouseHandler(e){ switch (e.type) { case "mouseenter": //鼠标滑入后,显示遮罩和右侧大图片 this.zoomMask.style.display="block"; this.zoomCont.style.display="block"; //监听鼠标移动和滑出事件 this.mouseHandlers=e=>this.mouseHandler(e); this.zoomSmall.addEventListener("mousemove",this.mouseHandlers); this.zoomSmall.addEventListener("mouseleave",this.mouseHandlers); break; case "mousemove": //遮罩移动 this.zoomMaskMove(e); break; case "mouseleave": //鼠标滑出后,显示遮罩和右侧大图片 this.zoomMask.style.display="none"; this.zoomCont.style.display="none"; //移除鼠标移动和滑出事件 this.zoomSmall.removeEventListener("mousemove",this.mouseHandlers); this.zoomSmall.removeEventListener("mouseleave",this.mouseHandlers); break; } } zoomMaskMove(e){ //遮罩移动 let rect=this.elem.getBoundingClientRect(); //计算let和top的值,等于鼠标的坐标-父容器的left值-遮罩的一半宽 let x=e.clientX-rect.x-Zoom.mask_width/2; let y=e.clientY-rect.y-Zoom.mask_width/2; //判断left和top的范围 if(x<0) x=0; if(x>Zoom.small_width-Zoom.mask_width) x=Zoom.small_width-Zoom.mask_width; if(y<0) y=0; if(y>Zoom.small_width-Zoom.mask_width) y=Zoom.small_width-Zoom.mask_width; this.zoomMask.style.left=x+"px"; this.zoomMask.style.top=y+"px"; //大图片移动 this.zoomContMove(x,y); } zoomContMove(_x,_y){ //计算大图片的背景定位,公式:zoom的宽/mask的宽=zoom的背景left值/mask的left值 let x=-Zoom.zoom_width/Zoom.mask_width*_x; let y=-Zoom.zoom_width/Zoom.mask_width*_y; this.zoomCont.style.backgroundPosition=x+"px "+y+"px"; } static setStyle(){ //设置样式 if(Zoom.styles) return; Zoom.styles=true; Utils.insertCss(".zoomContainer",{ width:Zoom.small_width+"px", height:Zoom.small_width+"px", position:"relative" }) Utils.insertCss(".zoomSmall",{ width:Zoom.small_width+"px", height:Zoom.small_width+"px", border: "1px solid #000", backgroundSize: "100% 100%", position:"absolute", left:"0px", top:"0px" }) Utils.insertCss(".zoomMask",{ width: this.mask_width + "px", height: this.mask_width + "px", backgroundColor: "rgba(200,170,0,0.3)", position: "absolute", left: "0px", top: "0px", display: "none" }) Utils.insertCss(".zoomContent",{ width: this.zoom_width + "px", height: this.zoom_width + "px", border: "1px solid #ccc", position: "absolute", left: (this.small_width + 2) + "px", top: "0px", display: "none" }) } }
IconList.js文件,创建下方图标列表,并完成翻页效果:
import Utils from "./Utils.js"; import Zoom from "./Zoom.js"; export default class IconList{ static styles=false; static num=5;//每页显示的图标数 static gap=0;//表示li的左右间距 position=0;//当前显示的图标为第几页 x=0;//列表的left值 prepIcon;//上一个点击的图标 static SET_BG_IMG="set_bg_img"; constructor(list){ this.list=list; this.elem=this.createE(); } createE(){ //创建外层容器 let div=Utils.createE("div"); div.className="iconContainer"; div.innerHTML=`<img class="prevBtn" src="/UploadFiles/2021-04-02/prev.png">Utils.js文件,是一个工具包:
export default class Utils{ static createE(elem,style,prep){ elem=document.createElement(elem); if(style) for(let prop in style) elem.style[prop]=style[prop]; if(prep) for(let prop in prep) elem[prop]=prep[prop]; return elem; } static appendTo(elem,parent){ if (parent.constructor === String) parent = document.querySelector(parent); parent.appendChild(elem); } static insertBefore(elem,parent){ if(parent.constructor === String) parent=document.querySelector(parent); parent.insertBefore(elem,parent.firstElementChild); } static randomNum(min,max){ return Math.floor(Math.random*(max-min)+min); } static randomColor(alpha){ alpha=alpha||Math.random().toFixed(1); if(isNaN(alpha)) alpha=1; if(alpha>1) alpha=1; if(alpha<0) alpha=0; let col="rgba("; for(let i=0;i<3;i++){ col+=Utils.randomNum(0,256)+","; } col+=alpha+")"; return col; } static insertCss(select,styles){ if(document.styleSheets.length===0){ let styleS=Utils.createE("style"); Utils.appendTo(styleS,document.head); } let styleSheet=document.styleSheets[document.styleSheets.length-1]; let str=select+"{"; for(var prop in styles){ str+=prop.replace(/[A-Z]/g,function(item){ return "-"+item.toLocaleLowerCase(); })+":"+styles[prop]+";"; } str+="}" styleSheet.insertRule(str,styleSheet.cssRules.length); } static getIdElem(elem,obj){ if(elem.id) obj[elem.id]=elem; if(elem.children.length===0) return obj; for(let i=0;i<elem.children.length;i++){ Utils.getIdElem(elem.children[i],obj); } } static addClass(elem,className){ let arr=(elem.className+" "+className).match(/\S+/g); arr=arr.filter((item,index)=>arr.indexOf(item,index+1)<0) elem.className=arr.join(" "); } static removeClass(elem,className){ if(!elem.className) return; let arr=elem.className.match(/\S+/g); let arr1=className.match(/\S+/g); arr1.forEach(item=>{ arr=arr.filter(t=>t!==item) }) elem.className=arr.join(" "); } static hasClass(elem,className){ if(!elem.className) return false; let arr=elem.className.match(/\S+/g); let arr1=className.match(/\S+/g); let res; arr1.forEach(item=>{ res= arr.some(it=>it===item) }) return res; } static loadImg({list,basePath,callback}){ if(!list || list.length===0) return; if(basePath) list=list.map(item=>basePath+item); let img=Utils.createE("img"); img.data={ list:list, callback:callback, resultList:[], num:0 } img.addEventListener("load",Utils.loadImgHandler); img.src=list[img.data.num]; } static loadImgHandler(e){ let data=e.currentTarget.data; data.resultList.push(e.currentTarget.cloneNode(false)); data.num++; if(data.num>data.list.length-1){ e.currentTarget.removeEventListener("load",Utils.loadImgHandler); data.callback(data.resultList); data=null; return; } e.currentTarget.src=data.list[data.num]; } }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。