文章詳情頁

原生js實現放大鏡組件

瀏覽：157日期：2024-04-07 10:27:02

本文實例為大家分享了js實現放大鏡組件開發的具體代碼，供大家參考，具體內容如下

功能需求：

1、根據圖片數組創建圖標列表；2、鼠標滑過圖標時，當前圖標增加紅色邊框；3、鼠標滑過圖標時，上方圖片區域顯示對應的圖片，右側顯示放大后的圖片內容；4、鼠標在圖片區域移動時，在右側實現放大效果；5、下方圖標列表，點擊左右按鈕，實現翻頁效果；6、當圖標內容不夠一頁時，只移動到最后一個圖標的位置；

以京東的詳情頁為例，看一下效果：

原生js實現放大鏡組件

放大鏡內容寫在 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 id='zoomSmall'><div id='zoomMask'></div></div> <div 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 src='http://m.b3g6.com/bcjs/img/prev.png'><div class='iconListCont'>${this.createIcon()}</div><img src='http://m.b3g6.com/bcjs/img/next.png'>`; //設置css樣式 IconList.setStyles(this.list); //獲取元素 Utils.getIdElem(div,this); //外層容器監聽點擊事件 div.addEventListener('click',e=>this.clickHandler(e)); //圖標列表監聽鼠標滑過事件 this.iconList.addEventListener('mouseover',e=>this.mouseHandler(e)); //默認顯示第一個圖標的邊框 this.setIconState(this.iconList.firstElementChild); //默認顯示第一個圖片 this.setBgImg(this.iconList.firstElementChild.firstElementChild); return div; } createIcon(){ //創建圖標列表 let str=`<ul id='iconList'>`; this.list.forEach(item=>{ str+=`<li><img src='http://m.b3g6.com/bcjs/${item}'></li>`; }) str+='</ul>'; return str; } clickHandler(e){ let src=e.target.src; //如果點擊的不是左右按鈕，直接跳出 if(!/prev/.test(src)&&!/next/.test(src)) return; //每一個li的實際寬度，width+border+margin let liWidth=54+4+IconList.gap; //page為一共有幾個整數頁 let page=Math.floor(this.list.length/IconList.num)-1; //remainder為最后不夠一頁的剩余圖標數 let remainder=this.list.length%IconList.num; if(/prev/.test(src)){ //如果點擊的是上一頁按鈕 if(this.x===0) return; //移動到最后一頁時 if(this.position===0&&remainder>0){ //移動的距離加等于li寬度*剩余圖標數 this.x+=liWidth*remainder; } else if(this.position<=page){ this.position--; //移動的距離加等于li的寬度*每頁顯示的圖標數（5個） this.x+=liWidth*IconList.num; } }else if(/next/.test(src)){ //如果點擊的是下一頁按鈕 if(this.x===-(this.list.length-IconList.num)*liWidth) return; if(this.position===page&&remainder>0){ //移動的距離減等于li寬度*剩余圖標數 this.x-=liWidth*remainder; } else if(this.position<page){ this.position++; //移動的距離減等于li的寬度*每頁顯示的圖標數（5個） this.x-=liWidth*IconList.num; } } //設置圖標列表的left值 this.iconList.style.left=this.x+'px'; } mouseHandler(e){ //如果滑過的不是Img標簽，直接跳出 if(e.target.constructor!==HTMLImageElement) return; //設置背景圖片 this.setBgImg(e.target); //設置當前滑過圖標的樣式 this.setIconState(e.target.parentElement); } setIconState(target){ //移除上一個滑過圖標的active樣式 if(this.prepIcon) Utils.removeClass(this.prepIcon,'active'); //將當前滑過的對象賦值給this.prepIcon this.prepIcon=target; //給當前滑過圖標增加active樣式 Utils.addClass(this.prepIcon,'active'); } setBgImg(target){ //拋發事件，將當前圖片的src傳過去 let src=target.src.replace('_icon',''); let evt=new Event(IconList.SET_BG_IMG); evt.src=src; document.dispatchEvent(evt); } static setStyles(list){ //設置樣式 if(IconList.styles) return; IconList.styles=true; Utils.insertCss('.iconContainer',{ width:Zoom.small_width+2+'px', height: '58px', position: 'absolute', top: Zoom.small_width+2+'px', left: '0px', }) Utils.insertCss('.iconContainer>img',{ width:'22px', height:'32px', cursor:'pointer', position:'absolute', top:'13px', }) Utils.insertCss('.prevBtn',{ left:'8px' }) Utils.insertCss('.nextBtn',{ right:'8px' }) Utils.insertCss('.iconListCont',{ width:Zoom.small_width-30*2+'px', height:'58px', position:'relative', left:'30px', overflow:'hidden' }) IconList.gap=((Zoom.small_width-30*2)-(54+4)*IconList.num)/IconList.num; Utils.insertCss('.iconList',{ width:(54+4+IconList.gap)*list.length+'px', listStyle:'none', padding:'0px', margin:'0px', position:'absolute', left:'0px', top:'0px', transition:'all .3s' }) Utils.insertCss('.iconList li',{ float:'left', width:'54px', height:'54px', margin:'0px '+IconList.gap/2+'px', cursor:'pointer', border:'2px solid transparent' }) Utils.insertCss('.iconList li.active',{ borderColor:'#f00' }) Utils.insertCss('.iconList li>img',{ width:'54px', height:'54px' }) Utils.insertCss('.clearfix::after',{ content:''.'', display:'block', height:'0px', clear:'both', overflow:'hidden', visibility:'hidden' }) }}

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]; }}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。

JavaScript

上一條：js canvas實現五子棋小游戲下一條：原生js實現自定義滾動條組件

相關文章：

1. js實現碰撞檢測2. 一文帶你徹底理解Java序列化和反序列化3. JS實現前端動態分頁碼代碼實例4. 關于IDEA 2020.3 多窗口視圖丟失的問題5. PHP驗證碼工具－Securimage6. 用Spring JMS使異步消息變得簡單7. 通過實例解析Python文件操作實現步驟8. Python3 json模塊之編碼解碼方法講解9. Python 制作查詢商品歷史價格的小工具10. Python 解析庫json及jsonpath pickle的實現

排行榜

					
					一文帶你徹底理解Java序列化和反序列化
用Spring JMS使異步消息變得簡單
關于IDEA 2020.3 多窗口視圖丟失的問題
PHP驗證碼工具－Securimage
js實現碰撞檢測
JS實現前端動態分頁碼代碼實例
Android 簡單的實現滑塊拼圖驗證碼功能
Java源碼解析之SortedMap和NavigableMap
ASP.NET MVC使用jQuery ui的progressbar實現進度條
Django 模板中常用的過濾器實現
Java 生成隨機驗證碼圖片的示例
				