原生js實(shí)現(xiàn)放大鏡組件
更新時(shí)間：2021年01月22日 08:24:27 作者：蒲公英芽
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)放大鏡組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)放大鏡組件開發(fā)的具體代碼，供大家參考，具體內(nèi)容如下
功能需求：
1、根據(jù)圖片數(shù)組創(chuàng)建圖標(biāo)列表；
2、鼠標(biāo)滑過圖標(biāo)時(shí)，當(dāng)前圖標(biāo)增加紅色邊框；
3、鼠標(biāo)滑過圖標(biāo)時(shí)，上方圖片區(qū)域顯示對(duì)應(yīng)的圖片，右側(cè)顯示放大后的圖片內(nèi)容；
4、鼠標(biāo)在圖片區(qū)域移動(dòng)時(shí)，在右側(cè)實(shí)現(xiàn)放大效果；
5、下方圖標(biāo)列表，點(diǎn)擊左右按鈕，實(shí)現(xiàn)翻頁效果；
6、當(dāng)圖標(biāo)內(nèi)容不夠一頁時(shí)，只移動(dòng)到最后一個(gè)圖標(biāo)的位置；
以京東的詳情頁為例，看一下效果：
放大鏡內(nèi)容寫在 Zoom.js 文件里，下方的圖標(biāo)列表內(nèi)容寫在 IconList.js 文件里，當(dāng)鼠標(biāo)滑過下面的圖標(biāo)時(shí)，需要更改放大鏡里div的背景圖片，這里用到了事件拋發(fā)。
下面附上代碼：
html結(jié)構(gòu) ：
<!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';
//圖標(biāo)數(shù)組
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文件，創(chuàng)建放大鏡組件：
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);
//創(chuàng)建外層的div容器
this.elem=this.createE();
//監(jiān)聽事件，改變zoomSmall的背景圖
document.addEventListener(Zoom.SET_BG_IMG,e=>this.setBgImg(e));
//創(chuàng)建下方的icon列表
this.createIconList(_list,this.elem);
}
createE(){
//創(chuàng)建外層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>`;
//設(shè)置樣式
Zoom.setStyle();
//獲取樣式
Utils.getIdElem(div,this);
//監(jiān)聽鼠標(biāo)滑入事件
this.zoomSmall.addEventListener("mouseenter",e=>this.mouseHandler(e));
return div;
}
appendTo(parent){
Utils.appendTo(this.elem,parent);
}
setBgImg(e){
//設(shè)置背景圖片
this.zoomSmall.style.backgroundImage=`url(${e.src})`;
this.zoomCont.style.backgroundImage=`url(${e.src})`;
}
createIconList(list,parent){
//創(chuàng)建下方icon圖標(biāo)列表
let iconList=new IconList(list);
Utils.appendTo(iconList.elem,parent);
}
mouseHandler(e){
switch (e.type) {
case "mouseenter":
//鼠標(biāo)滑入后，顯示遮罩和右側(cè)大圖片
this.zoomMask.style.display="block";
this.zoomCont.style.display="block";
//監(jiān)聽鼠標(biāo)移動(dòng)和滑出事件
this.mouseHandlers=e=>this.mouseHandler(e);
this.zoomSmall.addEventListener("mousemove",this.mouseHandlers);
this.zoomSmall.addEventListener("mouseleave",this.mouseHandlers);
break;
case "mousemove":
//遮罩移動(dòng)
this.zoomMaskMove(e);
break;
case "mouseleave":
//鼠標(biāo)滑出后，顯示遮罩和右側(cè)大圖片
this.zoomMask.style.display="none";
this.zoomCont.style.display="none";
//移除鼠標(biāo)移動(dòng)和滑出事件
this.zoomSmall.removeEventListener("mousemove",this.mouseHandlers);
this.zoomSmall.removeEventListener("mouseleave",this.mouseHandlers);
break;
}
}
zoomMaskMove(e){
//遮罩移動(dòng)
let rect=this.elem.getBoundingClientRect();
//計(jì)算let和top的值，等于鼠標(biāo)的坐標(biāo)-父容器的left值-遮罩的一半寬
let x=e.clientX-rect.x-Zoom.mask_width/2;
let y=e.clientY-rect.y-Zoom.mask_width/2;
//判斷l(xiāng)eft和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";
//大圖片移動(dòng)
this.zoomContMove(x,y);
}
zoomContMove(_x,_y){
//計(jì)算大圖片的背景定位，公式：zoom的寬/mask的寬=zoom的背景l(fā)eft值/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(){
//設(shè)置樣式
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文件，創(chuàng)建下方圖標(biāo)列表，并完成翻頁效果：
import Utils from "./Utils.js";
import Zoom from "./Zoom.js";
export default class IconList{
static styles=false;
static num=5;//每頁顯示的圖標(biāo)數(shù)
static gap=0;//表示li的左右間距
position=0;//當(dāng)前顯示的圖標(biāo)為第幾頁
x=0;//列表的left值
prepIcon;//上一個(gè)點(diǎn)擊的圖標(biāo)
static SET_BG_IMG="set_bg_img";
constructor(list){
this.list=list;
this.elem=this.createE();
}
createE(){
//創(chuàng)建外層容器
let div=Utils.createE("div");
div.className="iconContainer";
div.innerHTML=`<img class="prevBtn" src="./img/prev.png"><div class="iconListCont">${this.createIcon()}</div><img class="nextBtn" src="./img/next.png">`;
//設(shè)置css樣式
IconList.setStyles(this.list);
//獲取元素
Utils.getIdElem(div,this);
//外層容器監(jiān)聽點(diǎn)擊事件
div.addEventListener("click",e=>this.clickHandler(e));
//圖標(biāo)列表監(jiān)聽鼠標(biāo)滑過事件
this.iconList.addEventListener("mouseover",e=>this.mouseHandler(e));
//默認(rèn)顯示第一個(gè)圖標(biāo)的邊框
this.setIconState(this.iconList.firstElementChild);
//默認(rèn)顯示第一個(gè)圖片
this.setBgImg(this.iconList.firstElementChild.firstElementChild);
return div;
}
createIcon(){
//創(chuàng)建圖標(biāo)列表
let str=`<ul class="iconList clearfix" id="iconList">`;
this.list.forEach(item=>{
str+=`<li><img src="${item}"></li>`;
})
str+="</ul>";
return str;
}
clickHandler(e){
let src=e.target.src;
//如果點(diǎn)擊的不是左右按鈕，直接跳出
if(!/prev/.test(src)&&!/next/.test(src)) return;
//每一個(gè)li的實(shí)際寬度，width+border+margin
let liWidth=54+4+IconList.gap;
//page為一共有幾個(gè)整數(shù)頁
let page=Math.floor(this.list.length/IconList.num)-1;
//remainder為最后不夠一頁的剩余圖標(biāo)數(shù)
let remainder=this.list.length%IconList.num;
if(/prev/.test(src)){
//如果點(diǎn)擊的是上一頁按鈕
if(this.x===0) return;
//移動(dòng)到最后一頁時(shí)
if(this.position===0&&remainder>0){
//移動(dòng)的距離加等于li寬度*剩余圖標(biāo)數(shù)
this.x+=liWidth*remainder;
}
else if(this.position<=page){
this.position--;
//移動(dòng)的距離加等于li的寬度*每頁顯示的圖標(biāo)數(shù)（5個(gè)）
this.x+=liWidth*IconList.num;
}
}else if(/next/.test(src)){
//如果點(diǎn)擊的是下一頁按鈕
if(this.x===-(this.list.length-IconList.num)*liWidth) return;
if(this.position===page&&remainder>0){
//移動(dòng)的距離減等于li寬度*剩余圖標(biāo)數(shù)
this.x-=liWidth*remainder;
}
else if(this.position<page){
this.position++;
//移動(dòng)的距離減等于li的寬度*每頁顯示的圖標(biāo)數(shù)（5個(gè)）
this.x-=liWidth*IconList.num;
}
}
//設(shè)置圖標(biāo)列表的left值
this.iconList.style.left=this.x+"px";
}
mouseHandler(e){
//如果滑過的不是Img標(biāo)簽，直接跳出
if(e.target.constructor!==HTMLImageElement) return;
//設(shè)置背景圖片
this.setBgImg(e.target);
//設(shè)置當(dāng)前滑過圖標(biāo)的樣式
this.setIconState(e.target.parentElement);
}
setIconState(target){
//移除上一個(gè)滑過圖標(biāo)的active樣式
if(this.prepIcon) Utils.removeClass(this.prepIcon,"active");
//將當(dāng)前滑過的對(duì)象賦值給this.prepIcon
this.prepIcon=target;
//給當(dāng)前滑過圖標(biāo)增加active樣式
Utils.addClass(this.prepIcon,"active");
}
setBgImg(target){
//拋發(fā)事件，將當(dāng)前圖片的src傳過去
let src=target.src.replace("_icon","");
let evt=new Event(IconList.SET_BG_IMG);
evt.src=src;
document.dispatchEvent(evt);
}
static setStyles(list){
//設(shè)置樣式
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文件，是一個(gè)工具包：
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];
}
}
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
10個(gè)在JavaScript開發(fā)中常遇到的BUG
給大家詳細(xì)著整理了在JavaScript開發(fā)中大家經(jīng)常遇到的BUG和問題，需要的朋友參考學(xué)習(xí)下吧。2017-12-12
詳解javascript腳本何時(shí)會(huì)被執(zhí)行
這篇文章主要介紹了詳解javascript腳本何時(shí)會(huì)被執(zhí)行，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
JS點(diǎn)擊圖片彈出文件選擇框并覆蓋原圖功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS點(diǎn)擊圖片彈出文件選擇框并覆蓋原圖功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-08-08
比較詳細(xì)的關(guān)于javascript中void(0)的具體含義解釋
比較詳細(xì)的關(guān)于javascript中void(0)的具體含義解釋...2007-08-08
微信小程序?qū)崿F(xiàn)紅包功能（后端PHP實(shí)現(xiàn)邏輯）
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)紅包功能，以及后端PHP實(shí)現(xiàn)邏輯，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
javascript實(shí)現(xiàn)禁止右鍵和F12查看源代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)禁止右鍵和F12查看源代碼的代碼,需要的朋友可以參考下2014-12-12
前端生成截圖技術(shù)多樣,html2canvas雖詳細(xì)但耗時(shí)且阻塞操作,而domtoimage使用流暢,支持多種圖片格式轉(zhuǎn)換,如png、jpg、svg等,并可獲取原始像素值,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
淺談JS讀取DOM對(duì)象(標(biāo)簽)的自定義屬性
下面小編就為大家?guī)硪黄獪\談JS讀取DOM對(duì)象(標(biāo)簽)的自定義屬性。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
詳解如何優(yōu)雅迭代JavaScript字面對(duì)象
迭代是訪問集合元素的一種方法,可以被迭代的對(duì)象稱為可迭代對(duì)象,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅迭代JavaScript字面對(duì)象的相關(guān)資料,需要的朋友可以參考下2022-05-05![JavaScript 事件監(jiān)聽實(shí)例代碼[兼容IE,firefox] 含注釋](http://img.jbzj.com/images/xgimg/bcimg9.png)
JavaScript 事件監(jiān)聽實(shí)例代碼[兼容IE,firefox] 含注釋
JavaScript事件監(jiān)聽完整實(shí)例 含注釋，非常的不錯(cuò)，大家可以直接使用。2009-08-08