1. 技术文章
  2. ES6实现图片切换特效（图片墙效果）

ES6实现图片切换特效（图片墙效果）

由 ε祈祈猫儿з 提交于 2020-03-28 18:18:08

按照国际惯例先放效果图

贴代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="wrap">
        <!-- <div class="img_container">
            <ul class="img_classify">
                <li class="img_classify_type_btn img_classify_type_btn_active">类别1</li>
                <li class="img_classify_type_btn">类别2</li>
            </ul>
            <div class="img_pic_container">
                <figure>
                    <img src="images/1.jpg" alt="1">
                    <figcaption>title</figcaption>
                </figure>
            </div>
        </div> -->
    </div>
    <!-- 遮罩层，预览时出现大图 -->
    <!-- <div class="img_overlay">
        <div class="img_overlay_prevbtn"></div>
        <div class="img_overlay_nextbtn"></div>
        <img src="images/1.jpg" alt="1">
    </div> -->

    <script src="index.js"></script>
    <script src="data.js"></script>
    <script>
        const img=new $Img({
            data,
            initType:"JavaScript",//默认显示的分类
            outWrap:"#wrap"//所有DOM挂载点
        });
    </script>
</body>
</html>

index.css

*{
    margin:0;
    padding:0;
}
body{ 
    background: #fafafa;
    background: url('images/bg.png')
}
li{
    list-style:none;
}
a{
    text-decoration: none;
}
::-webkit-scrollbar {
    display: none;
}
#wrap{  
    width: 1065px;
    margin: 0 auto;
    padding: 30px;
    background: rgb(255, 255, 255);
    border-radius: 2px;
    margin-top: 100px;
}
.img_container{
    font-size: 10px;
}
.img_classify_type_btn{
    display: inline-block;
    padding: .2em 1em;
    font-size: 1.6em;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid #e95a44;
    outline: none;
    color: #e95a44;
    transition: all .4s;
    user-select: none;/*文字不允许用户选中*/
    border-radius: 2px;
}
.img_classify_type_btn_active{
    background: #e95a44;
    color: #fff;
}
.img_pic_container{
    position: relative;
    margin-top: 30px;
    width: 1005px;
    display: flex;
    flex-wrap: wrap;
    transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);/*动画效果*/
}
.img_pic_container figure{
    width: 240px;
    height: 140px;
    position: absolute;
    transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
    transform: scale(0, 0);
    opacity: 0;
    overflow: hidden;
    border-radius: 2px;
    user-select: none;
}
/* 伪元素遮罩层 */
.img_pic_container figure::before {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4;
    background: rgba(58, 12, 5, 0.5);
    content: ' ';
    font-size: 0;
    opacity: 0;
    transition: all .3s;
    cursor: pointer;
}
/* 图片 */
.img_pic_container figure img {
    display: block;
    width: 100%;
    height: 100%;
    transition: all .3s;
}
/* 图片标题 */
.img_pic_container figure figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 7;
    opacity: 0;
    font-size: 1.5em;
    color: rgb(255, 255, 255);
    transform: translate(-50%, -50%);
    transition: all .3s;
    text-align: center;
    cursor: pointer;
}
/* 悬停图片的时候标题显示 */
.img_pic_container figure:hover figcaption{
    opacity: 1;
}
.img_pic_container figure:hover img{
    transform: scale(1.1, 1.1);
}
/* 悬停图片的时候遮罩显示 */
.img_pic_container figure:hover::before{
    opacity: 1;
}
.img_overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all .3s;
    display: none;
    z-index: 99;
}
.img_overlay_prevbtn,
.img_overlay_nextbtn{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid white;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}
.img_overlay_prevbtn{
    left: 20px;
}
.img_overlay_nextbtn{
    right: 20px;
}
.img_overlay_prevbtn:active,
.img_overlay_nextbtn:active{
    background: rgb(241, 241, 241, .4);
}
.img_overlay_nextbtn::after{
    content: "N";
}
.img_overlay_prevbtn::after{
    content: "P";
}
.img_overlay img {
  transform: scale(2, 2);
}

index.js

(function(window,document){

    let canChange=true;
    let curImgIndex=0;//默认显示的图片索引

    //公共方法（便于之后对DOM的操作）
    const methods={
        //同时添加多个子元素，对象简洁表示法
        appendChilds(parent,...child){
            child.forEach(item=>{
                parent.appendChild(item);
            })
        },
        //选择单个元素
        $(selector,root=document){
            return root.querySelector(selector);
        },
        //选择多个元素
        $$(selector,root=document){
            return root.querySelectorAll(selector);
        }
    };

    // 构造函数
    let Img=function(options){
        this._init(options);//初始化，对图片进行分类
        this._createElement();//生成DOM
        this._bind();//绑定事件
        this._show();//显示到页面上
    }

    //初始化
    Img.prototype._init=function({data,initType,outWrap}){
        this.types=["全部"];//全部分类
        this.all=[];//所有图片
        this.classified={"全部":[]};//分类映射
        this.curType=initType;//当前显示的图片分类
        this.outWrap=methods.$(outWrap);//所有DOM挂载点
        this.imgContainer=null;//图片部分容器（不包括分类按钮）
        this.wrap=null;//图片区域总容器（包括分类按钮）
        this.typeBtnEls=null;//分类按钮数组
        this.figures=null;//图片数组

        this._classify(data);//对图片进行分类
        //console.log(this.classified);//打印分类映射表

    }

    //对图片进行分类
    Img.prototype._classify=function(data){
        let srcs=[];//存储已经生成过的图片，避免重复生成

        data.forEach(({type,title,alt,src},index)=>{
            // arr.includes(a) 判断数组中是否存在某个值
            // 如果分类的数组中，没有当前分类，则添加当前分类
            if(!this.types.includes(type)){            
                this.types.push(type);
            }

            //Object.keys(obj) 返回obj中所有属性名组成的数组
            //如果属性名中不存在该分类，则添加该分类
            if(!Object.keys(this.classified).includes(type)){
                this.classified[type]=[];
            }

            //如果该图片没有生成过
            if(!srcs.includes(src)){
                srcs.push(src);

                //生成图片
                let figure=document.createElement("figure");
                let img=document.createElement("img");
                let figcaption=document.createElement("figcaption");

                img.src=src;
                img.setAttribute("alt",alt);
                figcaption.innerText=title;

                methods.appendChilds(figure,img,figcaption);

                //添加到图片数组中
                this.all.push(figure);

                //添加到分类映射中
                this.classified[type].push(this.all.length-1);

            }else{
                //如果该图片已经生成过，就去srcs数组中找到对应图片
                //srcs.findIndex(s1=>s1===src) 遍历src数组，找到元素的值为src的，返回其下标
                this.classified[type].push(srcs.findIndex(s1=>s1===src));

            }
        })
    }

    //获取对应分类下的图片
    Img.prototype._getImgsByType=function(type){
        //如果分类是全部，就返回all数组
        //否则就去图片映射表里，找到该分类对应的图片的索引；
        //通过map遍历this.all数组，找到这些索引对应的图片
        return type==="全部"?[...this.all]:this.classified[type].map(index=>this.all[index]);
    }

    //生成DOM
    Img.prototype._createElement=function(){
        let typesBtn=[];
        //根据分类数组，生成所有分类对应的按钮元素
        for(let type of this.types.values()){    
            typesBtn.push(`
                <li class="img_classify_type_btn${ type===this.curType?' img_classify_type_btn_active':''}">${ type }</li>
            `);
        }

        //console.log(typesBtn);

        //整体模板
        let templates=`
            <ul class="img_classify">${ typesBtn.join("") }</ul>
            <div class="img_pic_container"></div>
        `;

        let wrap=document.createElement("div");
        wrap.className="img_container";
        wrap.innerHTML=templates;

        this.imgContainer=methods.$(".img_pic_container",wrap);

        //将分类下对应的图片数组使用扩展运算符展开，添加到图片容器中
        methods.appendChilds(this.imgContainer,...this._getImgsByType(this.curType));

        //取出可能会用到的元素，挂载到this上
        this.wrap=wrap;
        this.typeBtnEls=[...methods.$$(".img_classify_type_btn",wrap)];
        this.figures=[...methods.$$("figure",wrap)];//使用扩展运算符将取得的DOM元素转数组

        //遮罩层
        let overlay=document.createElement("div");
        overlay.className="img_overlay";
        overlay.innerHTML=`
            <div class="img_overlay_prevbtn"></div>
            <div class="img_overlay_nextbtn"></div>
            <img src="" alt="">
        `;
        methods.appendChilds(this.outWrap,overlay);
        this.overlay=overlay;
        this.previewImg=methods.$("img",overlay);//当前要预览的图片

        this._calcPosition(this.figures);//修改每张图片的定位
    }

    //映射关系
    Img.prototype._diff=function(curImgs,nextImgs){
        let diffArr=[];//保存映射关系
        // 如：当前[1,2,3,5,6]，下一批[3,9,11,12,14]
        // 则映射为[[2,0],..] 
        // 两组图片中国相同的图片为3,3在数组1的下标为2,3在数组2的下标为0，保存这种映射关系
        
        curImgs.forEach((src1,index1)=>{
            //遍历当前src数组，对每一个src，去下一批的src数组中找是否有相同的，有则返回该src在下一批数组中的下标
            let index2=nextImgs.findIndex(src2=>src1===src2);

            //
            if(index2!=-1){
                diffArr.push([index1,index2]);
            }
        })

        return diffArr;

    }

    //绑定事件
    Img.prototype._bind=function(){
        //解构赋值，获取到e.target
        methods.$(".img_classify",this.wrap).addEventListener("click",({target})=>{
            if(target.nodeName!=="LI") return;//如果点的不是li，则返回
            //console.log(target.innerText);
            
            if(!canChange) return;
            canChange=false;

            const type=target.innerText;
            const imgs=this._getImgsByType(type);//下一轮要显示的所有图片

            //目前出现的图片的所有src
            let curImgs=this.figures.map(figure=>methods.$("img",figure).src);
            //点击后下一批要出现的图片的src
            let nextImgs=imgs.map(figure=>methods.$("img",figure).src);

            const diffArr=this._diff(curImgs,nextImgs);//得到两组图片共有的图片映射关系
            //遍历该映射
            diffArr.forEach(([,index2])=>{//index2是两组中相同的图片在下一组中的索引
                //every() 方法使用指定函数检测数组中的所有元素：
                //如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
                //如果所有元素都满足条件，则返回 true。
                this.figures.every((figure,index)=>{
                    let src=methods.$("img",figure).src;
                    if(src===nextImgs[index2]){
                        //splice() 方法向/从数组中添加/删除项目
                        this.figures.splice(index,1);//找到相同的图片，从上一轮的图片数组中剔除
                        return false;
                    }
                    return true;
                })
            })

            this._calcPosition(imgs);

            let needAppendImgs=[];//切换下一轮时需要添加的元素（相同的元素不需要重复添加）
            if(diffArr.length){
                //如果两轮存在相同图片，则相同的图片 不需要重复加载
                let nextIndex=diffArr.map(([,index2])=>index2);//相同的图片的下标
                imgs.forEach((figure,index)=>{
                    if(!needAppendImgs.includes(index)){
                        needAppendImgs.push(figure);//如果该图片不存在，则添加
                    }
                })
            }else{
                //如果不存在相同图片，则所有图片需要加载
                needAppendImgs=imgs;
            }

            //隐藏当前所有图片
            this.figures.forEach(figure=>{
                figure.style.transform="scale(0,0) translate(0 100%)";
                figure.style.opacity="0";
            })

            //添加需要新增的图片
            methods.appendChilds(this.imgContainer,...needAppendImgs);

            //显示新一轮的图片            
            setTimeout(()=>{
                imgs.forEach(el=>{                    
                    el.style.transform="scale(1,1) translate(0,0)";
                    el.style.opacity="1";    
                    //console.log(el);                
                })
            });

            //销毁上一轮出现的所有图片
            setTimeout(()=>{
                this.figures.forEach(figure=>{
                    this.imgContainer.removeChild(figure);            
                })

                this.figures=imgs;

                canChange=true;
            },600);//在css中动画设置的结束时长就是0.6秒

            //切换按钮样式
            this.typeBtnEls.forEach(btn=>(btn.className="img_classify_type_btn"));
            target.className="img_classify_type_btn img_classify_type_btn_active";
        })

        //给每张图片绑定点击事件
        this.imgContainer.addEventListener("click",({target})=>{
            if(target.nodeName!=="FIGURE" && target.nodeName!=="FIGCAPTION") return;
            if(target.nodeName==="FIGCAPTION"){
                target=target.parentNode;
            }

            //显示预览的图片和遮罩层
            const src=methods.$("img",target).src;
            curImgIndex=this.figures.findIndex(figure=>src===methods.$("img",figure).src);
            this.previewImg.src=src;
            this.overlay.style.display="flex";
            
            setTimeout(()=>{
                this.overlay.style.opacity="1";
            })
        })

        //点击遮罩层，淡出
        this.overlay.addEventListener("click",()=>{
            this.overlay.style.opacity="0";
            setTimeout(()=>{
                this.overlay.style.display="none";
            },300);//300毫秒是css中transition设置的时间
        })

        //上一张下一张按钮绑定
        methods.$(".img_overlay_prevbtn",this.overlay).addEventListener("click",e=>{
            //阻止事件冒泡，导致触发点击遮罩隐藏遮罩的情况
            e.stopPropagation();
            curImgIndex=curImgIndex===0?this.figures.length-1:curImgIndex-1;
            this.previewImg.src=methods.$("img",this.figures[curImgIndex]).src;
        })
        methods.$(".img_overlay_nextbtn",this.overlay).addEventListener("click",e=>{
            e.stopPropagation();
            curImgIndex=curImgIndex===this.figures.length-1?0:curImgIndex+1;
            this.previewImg.src=methods.$("img",this.figures[curImgIndex]).src;
        })
    }

    //显示到页面上
    Img.prototype._show=function(){
        methods.appendChilds(this.outWrap,this.wrap);//把图片总容器挂载到指定的外容器上

        //演示器实现进场动画
        setTimeout(()=>{
            //让所有图片显示
            this.figures.forEach(figure=>{
                figure.style.transform="scale(1,1) translate(0,0)";
                figure.style.opacity="1";
            })
        },0)

    }

    //计算每张图片的top和left
    Img.prototype._calcPosition=function(figures){
        figures.forEach((figure,index)=>{
            //140是每张图片的高度，15是每张图片垂直方向的间隙
            //240是每张图片的宽度，15是每张图片水平方向的间隙
            figure.style.top=parseInt(index/4)*140+parseInt(index/4)*15+"px";
            figure.style.left=parseInt(index%4)*(240+15)+"px";
            figure.style.transform="scale(0,0) translate(0,-100%)";//让特效更丰富
        })

        //设置图片容器高度
        var num=figures.length;//图片数量
        if(num<=4){
            this.imgContainer.style.height="140px";
        }else{
            this.imgContainer.style.height=Math.ceil(num/4)*140+(Math.ceil(num/4)-1)*15+"px";
        }
        
    }

    window.$Img=Img;//暴露到全局

})(window,document);

data.js（数据）

const data = [

  {
    type: 'JavaScript',
    title: 'ES6快速入门',
    alt: 'ES6快速入门',
    src: './images/1.jpg'
  },

  {
    type: 'JavaScript',
    title: 'Javascript实现二叉树算法',
    alt: 'Javascript实现二叉树算法',
    src: './images/2.jpg'
  },

  {
    type: 'JavaScript',
    title: 'Canvas绘制时钟',
    alt: 'Canvas绘制时钟',
    src: './images/3.jpg'
  },

  {
    type: 'JavaScript',
    title: '基于websocket的火拼俄罗斯',
    alt: '基于websocket的火拼俄罗斯',
    src: './images/15.jpg'
  },

  {
    type: '前端框架',
    title: 'React知识点综合运用实例',
    alt: 'React知识点综合运用实例',
    src: './images/4.jpg'
  },

  {
    type: '前端框架',
    title: 'React组件',
    alt: 'React组件',
    src: './images/5.jpg'
  },

  {
    type: '前端框架',
    title: 'Vue+Webpack打造todo应用',
    alt: 'Vue+Webpack打造todo应用',
    src: './images/6.jpg'
  },

  {
    type: '前端框架',
    title: 'Vue.js入门基础',
    alt: 'Vue.js入门基础',
    src: './images/7.jpg'
  },

  {
    type: '前端框架',
    title: '使用Vue2.0实现购物车和地址选配功能',
    alt: '使用Vue2.0实现购物车和地址选配功能',
    src: './images/8.jpg'
  },

  {
    type: 'React',
    title: 'React知识点综合运用实例',
    alt: 'React知识点综合运用实例',
    src: './images/4.jpg'
  },

  {
    type: 'React',
    title: 'React组件',
    alt: 'React组件',
    src: './images/5.jpg'
  },

  {
    type: 'Vue.js',
    title: 'Vue+Webpack打造todo应用',
    alt: 'Vue+Webpack打造todo应用',
    src: './images/6.jpg'
  },

  {
    type: 'Vue.js',
    title: 'Vue.js入门基础',
    alt: 'Vue.js入门基础',
    src: './images/7.jpg'
  },

  {
    type: 'Vue.js',
    title: '使用Vue2.0实现购物车和地址选配功能',
    alt: '使用Vue2.0实现购物车和地址选配功能',
    src: './images/8.jpg'
  }

]

 

标签
alt属性
react
pic
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!