原生js實現放大鏡元件

本文例項為大家分享了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 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",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.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",left: (this.small_width + 2) + "px",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="./img/prev.png"><div class="iconListCont">${this.createIcon()}</div><img class="nextBtn" src="./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 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;
  //如果點選的不是左右按鈕，直接跳出
  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",top: Zoom.small_width+2+"px",})
  Utils.insertCss(".iconContainer>img",{
   width:"22px",height:"32px",cursor:"pointer",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",top:"0px",transition:"all .3s"
  })
  Utils.insertCss(".iconList li",{
   float:"left",width:"54px",height:"54px",margin:"0px "+IconList.gap/2+"px",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];
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

原生js實現放大鏡元件

原生js實現放大鏡元件

原生 JS 實現樹元件

原生js實現自定義滾動條元件

原生js實現下拉框選擇元件

原生js實現滑塊區間元件

原生js實現上傳圖片控制元件

原生JS實現分頁點選控制元件

原生js實現檔案上傳、下載、封裝等例項方法

原生js實現無縫輪播圖

原生JS實現留言板功能

原生js實現點選輪播切換圖片

原生js實現日曆效果

原生JS實現螢火蟲效果

原生JS實現貪吃蛇小遊戲

原生js實現瀑布流效果

原生JS實現煙花效果

原生js實現碰撞檢測

原生js實現ajax請求和JSONP跨域請求操作示例

原生js實現的金山打字小遊戲（例項程式碼詳解）

原生js實現密碼強度驗證功能

原生js實現放大鏡元件

相關推薦