首页
所有分类
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 相关文章推荐
js文件缓存之版本管理详解
Jul 05 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
js实现三张图（文）片一起切换的banner焦点图
Aug 25 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 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
大脑(1) 塑料(1) 天问一号(1) 火星(2) 数据(1) NASA(1) 毅力号(1) 美国航天局(1) 酶(1) 人造肉(1)
You might like
PHP初学者头疼问题总结
2006/10/09 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
PHP字符串函数系列之nl2br()，在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php木马webshell扫描器代码
2012/01/25 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
解决PHP程序运行时：Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
python统计一个文本中重复行数的方法
2014/11/19 Python
python GUI实例学习
2017/11/21 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python分数表示方式和写法
2019/06/26 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
Python如何读写CSV文件
2020/08/13 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
法国设计制造的扫帚和刷子：Andrée Jardin
2018/12/06 全球购物
Juicy Couture Beauty官方网站：香水和化妆品
2019/03/12 全球购物
《泉水》教学反思
2014/04/11 职场文书
求职简历自荐信
2014/06/18 职场文书
节水口号标语
2014/06/19 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
入党转正申请书范文
2019/05/20 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
Nginx的基本概念和原理
2022/03/21 Servers