首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生js实现放大镜组件

Posted in Javascript onJanuary 22, 2021

本文实例为大家分享了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",{
   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="./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",
   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];
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

原生js实现放大镜组件

- Author -

蒲公英芽

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
JS原形与原型链深入详解
May 09 Javascript
Vue仿Bibibili首页的问题
Jan 21 #Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 #Vue.js
Vue看了就会的8个小技巧
Jan 21 #Vue.js
原生js实现滑块区间组件
Jan 20 #Javascript
原生js实现下拉框选择组件
Jan 20 #Javascript
原生js实现自定义滚动条组件
Jan 20 #Javascript
原生js实现自定义滚动条
Jan 20 #Javascript
韩国购物网站(27) 马来西亚购物网站(41) 俄罗斯购物网站(137) 日本购物网站(72) 西班牙购物网站(115) 德国购物网站(227) 埃及购物网站(2) 墨西哥购物网站(16) 瑞士购物网站(28) 印度购物网站(45)
You might like
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
js 判断 enter 事件
2009/02/12 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
jQuery Tags Input Plugin（添加/删除标签插件）详解
2016/06/20 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
Js面试算法详解
2018/04/08 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
详解JavaScript中的数据类型，以及检测数据类型的方法
2020/09/17 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
如何基于python实现不邻接植花
2020/05/01 Python
python实现录音功能（可随时停止录音）
2020/10/26 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
Quiksilver荷兰官方网站：冲浪和滑雪板
2019/11/16 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
维护民族团结演讲稿
2014/08/27 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
道德模范事迹材料
2014/12/20 职场文书
MySQL 视图（View）原理解析
2021/05/19 MySQL
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers