原生js实现放大镜组件
本文实例为大家分享了js实现放大镜组件开发的具体代码，供大家参考，具体内容如下
功能需求：
1、根据图片数组创建图标列表；
2、鼠标滑过图标时，当前图标增加红色边框；
3、鼠标滑过图标时，上方图片区域显示对应的图片，右侧显示放大后的图片内容；
4、鼠标在图片区域移动时，在右侧实现放大效果；
5、下方图标列表，点击左右按钮，实现翻页效果；
6、当图标内容不够一页时，只移动到最后一个图标的位置；
以京东的详情页为例，看一下效果：
放大镜内容写在 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];
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
奇妙的Javascript图片放大镜
在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜.现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果. 制作思路:"放大镜"后有一幅背景图,它是"放大了"的图的原本.我们通过移动"放大镜"时适当调整背景图的位置,使它显示的刚好是需要要放大的部分. 效果演示: (点这里在新窗口中查看) 制作步骤: 1)先准备两幅内容相同尺寸不同的图片,这里我们找了一个400×300像素的缩略图small_hill.gif,一
-
JavaScript 图片放大镜（可拖放、缩放效果）第1/4页
前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]
-
js实现简单放大镜特效
本文实例为大家分享了js实现简单放大镜特效的具体代码,供大家参考,具体内容如下 先来看看效果: 写放大镜之前我们先来了解一下定位: 通常子绝父相 (父元素相对定位,子元素绝对定位) 元素的定位方式: 1.static 静态定位,所有元素,不添加任何定位方式时的默认状态 2.relative 相对定位,不脱离文档流,可以相对于自身的原始位置,位移 3.fixed 固定定位,完全脱离文档流,相对于浏览器的空白区域来位移, 且不会因为浏览器的滚动而滚动 4.absolute
-
原生js写的放大镜效果
我的大体思路是:时时监听鼠标的坐标,当鼠标移动时,透明层随着鼠标移动,大图片相对透明层的移动而移动.不废话了,看代码. 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>放大镜</title> <meta name="Keywords" content=""> <me
-
js实现购物网站放大镜功能
本文实例为大家分享了js实现购物网站放大镜功能的具体代码,供大家参考,具体内容如下 首先看效果图: 先是布局,左边一个小图框,包含一个鼠标移动框,右边一个放大框. <div class="box"> <div class="small"> <img src="small3.jpg" alt=""> <div class="move"></div>
-
JavaScript实现简易放大镜最全代码解析（ES5）
本文实例为大家分享了JavaScript实现简易放大镜的具体代码,供大家参考,具体内容如下 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ES5放大镜</title> <style> .box { width: 170px; height: 180px; margin: 100px 200px; border: 1px
-
JavaScript图片放大镜效果代码[代码比较简单]
#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op
-
用js实现放大镜的效果的简单实例
第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery
-
js放大镜放大图片效果
我们 js图片放大镜 body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; le
-
js实现简单的放大镜效果
本文实例为大家分享了js实现简单放大镜效果的具体代码,供大家参考,具体内容如下 效果 效果,鼠标在原图片移动,黄色小盒子跟随鼠标移动,黄色小盒子盖住的部分,在显示区显示 效果图如下: 核心思路 1.鼠标放置在图片上,显示区出现,鼠标离开小盒子,显示区消失 2.鼠标在图片上移动时,小盒子跟随鼠标移动,且鼠标在黄色小盒子中间位置 3.小盒子给判断,让其不能超出图片区域 4.小盒在图片上移动多少,显示区域要移动同比例的距离 5.当显示区大小发生改变,或显示区内容增大变小,原来图片上的黄色小盒子随之改变