陈莺莺呀

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

按照国际惯例先放效果图

贴代码：

index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indextitle>
    <link rel="stylesheet" href="index.css">
head>
<body>
    <div id="wrap">
        
    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(`
                ${ type }
            `);
        }

        //console.log(typesBtn);

        //整体模板
        let templates=`
            ${ typesBtn.join("") }
            
        `;

        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=`
            
            
            
        `;
        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'
  }

]

想家爆米花机
也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务 java 架构
在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
2021年12月19日，春蕾教育集团团建活动感受——黄晓丹黄错错加油
感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
绘本讲师训练营【24期】8/21阅读原创《独生小孩》 1784e22615e0
24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他
店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码说私域人工智能小程序
摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动李蕾1229
为促进我校教师专业发展，发挥骨干教师的引领带头作用，11月6日下午，我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动。图片发自App会议由教师发展处李蕾主任主持，首先，由范校长宣读新老教师结对名单及双方承担职责。随后，两位新调入教师陈玉萍、莫正杰分别和他们的师傅鲍元美、刘召彬老师签订了师徒结对协议书。图片发自App图片发自App师徒拥抱、握手。有了师傅就有了目标有了方向，相信两位新教师在师
向内而求陈陈_19b4
10月27日，阴。阅读书目:《次第花开》。作者:希阿荣博堪布，是当今藏传佛家宁玛派最伟大的上师法王，如意宝晋美彭措仁波切颇具影响力的弟子之一。多年以来，赴海内外各地弘扬佛法，以正式授课、现场开示、发表文章等多种方法指导佛学弟子修行佛法。代表作《寂静之道》、《生命这出戏》、《透过佛法看世界》自出版以来一直是佛教类书籍中的畅销书。图片发自App金句:1.佛陀说，一切痛苦的根源在于我们长期以来对自身及外
消息中间件有哪些常见类型 xmh-sxh-1314 java
消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
开心蒋泳频
从无比抗拒来上课到接受，感动，收获～看着波哥成长，晶晶幸福笑容满面。感觉自己做的事情很有意义，很开心！还有3个感召目标就是还有三个有缘人，哈哈。明天感召去明日计划：8：30-11：00小公益11：00-21点上班，感召图片发自App图片发自App图片发自App
《小满细雨轻湿尘》快乐的人ZZM
图片发自App《小满细雨轻湿尘》文/快乐的人zzm小满细雨轻湿尘石榴花开落纷纷落红不是无情物坠入泥土育养根2018-5-23
腾讯云技术深度探索：构建高效云原生微服务架构我的运维人生云原生架构腾讯云运维开发技术共享
腾讯云技术深度探索：构建高效云原生微服务架构在当今快速发展的技术环境中，云原生技术已成为企业数字化转型的关键驱动力。腾讯云作为行业领先的云服务提供商，不断推出创新的产品和技术，助力企业构建高效、可扩展的云原生微服务架构。本文将深入探讨腾讯云在微服务领域的最新进展，并通过一个实际案例展示如何在腾讯云平台上构建云原生应用。腾讯云微服务架构概览腾讯云微服务架构基于云原生理念，旨在帮助企业快速实现应用的容
感赏日志133 马姐读书
图片发自App感赏自己今天买个扫地机，以后可以解放出来多看点书，让这个智能小机器人替我工作了。感赏孩子最近进步很大，每天按时上学，认真听课，认真背书，主动认真完成老师布置的作业。感赏自己明白自己容易受到某人的影响，心情不好，每当此刻我就会舒缓，感赏，让自己尽快抽离，想好的一面。感赏儿子今天在我提醒他事情时，告诉我谢谢妈妈对我的提醒我明白了，而不是说我啰嗦，管事情，孩子更懂事了，懂得感恩了。投射父母
今又重阳芮峻
今又重阳图片发自App白露成霜菊花黄，岁岁重阳，今又重阳。登高远望，君不见，那来时路上少年，青丝已染雪霜。落日一点一点西坠，谁有力量，托住使其回往。转眼缺了大半，又能怎样？江天两茫茫。给我一壶烈酒，我要敬那斜阳，看谁先醉？笑指西天红了一片，借点酒力，老夫聊发一次少年狂。老严.2019年重阳节.杭州
蘩漪：新女性？利己主义者赮_红雨
蘩漪是曹禺《雷雨》笔下的女性形象。对于她的喜爱，曹禺在之前的访谈中，就已经表达得很清楚了，蘩漪是他所倾心的女子的“代替者”。在这个女性身上有着曹禺最精心的描写，但同时她的身上又存在着一些时代的问题。图片发自App首先，繁漪是追求自由和幸福的新女性形象。她是精神悲剧的核心人物，她对周朴园的反抗，具有典型意义。她是位资产阶级家庭出身的小姐，受过五四新思潮的影响，她任性、傲慢，追求人格独立、个性自由和爱
拥有断舍离的心态，过精简生活--《断舍离》读书笔记爱吃丸子的小樱桃
不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
少了生活气息我爱大草莓
最近啊，总觉得自己日更的内容缺了点什么。我仔细地想，大概是少了些生活气息。这两三个月减少了许多与别人相处的时间，独自生活，偶尔只是出去买菜，总觉得生活好像变空了许多。买菜的时候会跟档口的阿姨聊一两句话，让自己感觉在真实地生活着。幸好我也不是一宅到底，偶尔周末也会约着跟好朋友见面，面对面交流跟隔着屏幕交流，效果还是不一样的，至少有更为真实的生活感。写作不仅需要有阅读量，有文笔，生活阅历也是非常重要的
从0到500+，我是如何利用自媒体赚钱？一列脚印
运营公众号半个多月，从零基础的小白到现在慢慢懂了一些运营的知识。做好公众号是很不容易的，要做很多事情；排版、码字、引流…通通需要自己解决，业余时间全都花费在这上面涨这么多粉丝是真的不容易，对比知乎大佬来说，我们这种没资源，没人脉，还没钱的小透明来说，想要一个月涨粉上万，怕是今天没睡醒（不过你有的方法，算我piapia打脸）至少我是清醒的，自己慢慢努力，实现我的万粉目标！大家快来围观、支持我吧！孩子
使用LLaVa和Ollama实现多模态RAG示例 llzwxh888 python 人工智能开发语言
本文将详细介绍如何使用LLaVa和Ollama实现多模态RAG（检索增强生成），通过提取图像中的结构化数据、生成图像字幕等功能来展示这一技术的强大之处。安装环境首先，您需要安装以下依赖包：!pipinstallllama-index-multi-modal-llms-ollama!pipinstallllama-index-readers-file!pipinstallunstructured!p
深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具 nseejrukjhad 数据库 python
深入理解MultiQueryRetriever：提升向量数据库检索效果的强大工具引言在人工智能和自然语言处理领域，高效准确的信息检索一直是一个关键挑战。传统的基于距离的向量数据库检索方法虽然广泛应用，但仍存在一些局限性。本文将介绍一种创新的解决方案：MultiQueryRetriever，它通过自动生成多个查询视角来增强检索效果，提高结果的相关性和多样性。MultiQueryRetriever的工
利用LangChain的StackExchange组件实现智能问答系统 nseejrukjhad langchain microsoft 数据库 python
利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
【目标检测数据集】卡车数据集1073张VOC+YOLO格式熬夜写代码的平头哥∰ 目标检测 YOLO 人工智能
数据集格式：PascalVOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)：1073标注数量(xml文件个数)：1073标注数量(txt文件个数)：1073标注类别数：1标注类别名称:["truck"]每个类别标注的框数：truck框数=1120总框数：1120使用标注工具：labelImg标注
其二十八尾喵
你知道吗？图片发自App我今天知道了你有喜欢的人，不是我。心空空的，整个人都不是我的了。可，怎么办？还是要好好的活着，毕竟你喜欢的人，我不能杀，可是我可以杀其他喜欢你的人呀！也罢，此生无缘，来世再见。鱼干
MongoDB Oplog 窗口喝醉酒的小白 MongoDB 运维
在MongoDB中，oplog（操作日志）是一个特殊的日志系统，用于记录对数据库的所有写操作。oplog允许副本集成员（通常是从节点）应用主节点上已经执行的操作，从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中，从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定：Oplog大小：oplog的大小是有限
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
Faiss Tips：高效向量搜索与聚类的利器焦习娜Samantha
FaissTips：高效向量搜索与聚类的利器faiss_tipsSomeusefultipsforfaiss项目地址:https://gitcode.com/gh_mirrors/fa/faiss_tips项目介绍Faiss是由FacebookAIResearch开发的一个用于高效相似性搜索和密集向量聚类的库。它支持多种硬件平台，包括CPU和GPU，能够在海量数据集上实现快速的近似最近邻搜索（AN
番茄西红柿叶子病害分类数据集12882张11类别 futureflsl 数据集分类数据挖掘人工智能
数据集类型：图像分类用，不可用于目标检测无标注文件数据集格式：仅仅包含jpg图片，每个类别文件夹下面存放着对应图片图片数量(jpg文件个数)：12882分类类别数：11类别名称:["Bacterial_Spot_Bacteria","Early_Blight_Fungus","Healthy","Late_Blight_Water_Mold","Leaf_Mold_Fungus","Powdery
钢筋长度超限检测检数据集VOC+YOLO格式215张1类别 futureflsl 数据集 YOLO 深度学习机器学习
数据集格式：PascalVOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件)图片数量(jpg文件个数)：215标注数量(xml文件个数)：215标注数量(txt文件个数)：215标注类别数：1标注类别名称:["iron"]每个类别标注的框数：iron框数=215总框数：215使用标注工具：labelImg标注规则：对类别进
[黑洞与暗粒子]没有光的世界 comsci
无论是相对论还是其它现代物理学,都显然有个缺陷,那就是必须有光才能够计算但是,我相信,在我们的世界和宇宙平面中,肯定存在没有光的世界.... 那么,在没有光的世界,光子和其它粒子的规律无法被应用和考察,那么以光速为核心的 &nbs
jQuery Lazy Load 图片延迟加载 aijuans jquery
基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。版本： jQuery v1.4.4+ jQuery Lazy Load v1.7.2 注意事项：需要真正实现图片延迟加载，必须将真实图片地址写在 data-original 属性中。若 src
使用Jodd的优点 Kai_Ge jodd
1. 简化和统一 controller ，抛弃 extends SimpleFormController ，统一使用 implements Controller 的方式。 2. 简化 JSP 页面的 bind, 不需要一个字段一个字段的绑定。 3. 对 bean 没有任何要求，可以使用任意的 bean 做为 formBean。使用方法简介
jpa Query转hibernate Query 120153216 Hibernate
public List<Map> getMapList(String hql, Map map) { org.hibernate.Query jpaQuery = entityManager.createQuery(hql); if (null != map) { for (String parameter : map.keySet()) { jp
Django_Python3添加MySQL/MariaDB支持 2002wmj mariaDB
现状首先，[email protected] 中默认的引擎为 django.db.backends.mysql 。但是在Python3中如果这样写的话，会发现 django.db.backends.mysql 依赖 MySQLdb[5] ，而 MySQLdb 又不兼容 Python3 于是要找一种新的方式来继续使用MySQL。 MySQL官方的方案首先据MySQL文档[3]说，自从MySQL
在SQLSERVER中查找消耗IO最多的SQL 357029540 SQL Server
返回做IO数目最多的50条语句以及它们的执行计划。 select top 50 (total_logical_reads/execution_count) as avg_logical_reads, (total_logical_writes/execution_count) as avg_logical_writes, (tot
spring UnChecked 异常官方定义！ 7454103 spring
如果你接触过spring的事物管理！那么你必须明白 spring的非捕获异常！即 unchecked 异常！因为 spring 默认这类异常事物自动回滚！！ public static boolean isCheckedException(Throwable ex) { return !(ex instanceof RuntimeExcep
mongoDB 入门指南、示例 adminjun java mongodb 操作
一、准备工作 1、下载mongoDB 下载地址：http://www.mongodb.org/downloads 选择合适你的版本相关文档：http://www.mongodb.org/display/DOCS/Tutorial 2、安装mongoDB A、不解压模式：将下载下来的mongoDB-xxx.zip打开，找到bin目录，运行mongod.exe就可以启动服务，默
CUDA 5 Release Candidate Now Available aijuans CUDA
The CUDA 5 Release Candidate is now available at http://developer.nvidia.com/<wbr></wbr>cuda/cuda-pre-production. Now applicable to a broader set of algorithms, CUDA 5 has advanced fe
Essential Studio for WinRT网格控件测评 Axiba JavaScript html5
Essential Studio for WinRT界面控件包含了商业平板应用程序开发中所需的所有控件，如市场上运行速度最快的grid 和chart、地图、RDL报表查看器、丰富的文本查看器及图表等等。同时，该控件还包含了一组独特的库，用于从WinRT应用程序中生成Excel、Word以及PDF格式的文件。此文将对其另外一个强大的控件——网格控件进行专门的测评详述。网格控件功能 1、
java 获取windows系统安装的证书或证书链 bewithme windows
有时需要获取windows系统安装的证书或证书链，比如说你要通过证书来创建java的密钥库。有关证书链的解释可以查看此处。 public static void main(String[] args) { SunMSCAPI providerMSCAPI = new SunMSCAPI(); S
NoSQL数据库之Redis数据库管理(set类型和zset类型) bijian1013 redis 数据库 NoSQL
4.sets类型 Set是集合，它是string类型的无序集合。set是通过hash table实现的，添加、删除和查找的复杂度都是O(1)。对集合我们可以取并集、交集、差集。通过这些操作我们可以实现sns中的好友推荐和blog的tag功能。 sadd：向名称为key的set中添加元
异常捕获何时用Exception，何时用Throwable bingyingao
用Exception的情况 try { //可能发生空指针、数组溢出等异常 } catch (Exception e) {
【Kafka四】Kakfa伪分布式安装 bit1129 kafka
在http://bit1129.iteye.com/blog/2174791一文中，实现了单Kafka服务器的安装，在Kafka中，每个Kafka服务器称为一个broker。本文简单介绍下，在单机环境下Kafka的伪分布式安装和测试验证 1. 安装步骤 Kafka伪分布式安装的思路跟Zookeeper的伪分布式安装思路完全一样，不过比Zookeeper稍微简单些(不
Project Euler bookjovi haskell
Project Euler是个数学问题求解网站，网站设计的很有意思，有很多problem，在未提交正确答案前不能查看problem的overview，也不能查看关于problem的discussion thread，只能看到现在problem已经被多少人解决了，人数越多往往代表问题越容易。看看problem 1吧： Add all the natural num
Java-Collections Framework学习与总结-ArrayDeque BrokenDreams Collections
表、栈和队列是三种基本的数据结构，前面总结的ArrayList和LinkedList可以作为任意一种数据结构来使用，当然由于实现方式的不同，操作的效率也会不同。这篇要看一下java.util.ArrayDeque。从命名上看
读《研磨设计模式》-代码笔记-装饰模式-Decorator bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.io.BufferedOutputStream; import java.io.DataOutputStream; import java.io.FileOutputStream; import java.io.Fi
Maven学习(一) chenyu19891124 Maven私服
学习一门技术和工具总得花费一段时间，5月底6月初自己学习了一些工具，maven+Hudson+nexus的搭建，对于maven以前只是听说，顺便再自己的电脑上搭建了一个maven环境，但是完全不了解maven这一强大的构建工具，还有ant也是一个构建工具，但ant就没有maven那么的简单方便，其实简单点说maven是一个运用命令行就能完成构建，测试，打包，发布一系列功
[原创]JWFD工作流引擎设计----节点匹配搜索算法(用于初步解决条件异步汇聚问题) 补充 comsci 算法工作 PHP 搜索引擎嵌入式
本文主要介绍在JWFD工作流引擎设计中遇到的一个实际问题的解决方案，请参考我的博文"带条件选择的并行汇聚路由问题"中图例A2描述的情况(http://comsci.iteye.com/blog/339756),我现在把我对图例A2的一个解决方案公布出来，请大家多指点节点匹配搜索算法(用于解决标准对称流程图条件汇聚点运行控制参数的算法) 需要解决的问题：已知分支
Linux中用shell获取昨天、明天或多天前的日期 daizj linux shell 上几年昨天获取上几个月
在Linux中可以通过date命令获取昨天、明天、上个月、下个月、上一年和下一年 # 获取昨天 date -d 'yesterday' # 或 date -d 'last day' # 获取明天 date -d 'tomorrow' # 或 date -d 'next day' # 获取上个月 date -d 'last month' #
我所理解的云计算 dongwei_6688 云计算
在刚开始接触到一个概念时，人们往往都会去探寻这个概念的含义，以达到对其有一个感性的认知，在Wikipedia上关于“云计算”是这么定义的，它说： Cloud computing is a phrase used to describe a variety of computing co
YII CMenu配置 dcj3sjt126com yii
Adding id and class names to CMenu We use the id and htmlOptions to accomplish this. Watch. //in your view $this->widget('zii.widgets.CMenu', array( 'id'=>'myMenu', 'items'=>$this-&g
设计模式之静态代理与动态代理 come_for_dream 设计模式
静态代理与动态代理代理模式是java开发中用到的相对比较多的设计模式，其中的思想就是主业务和相关业务分离。所谓的代理设计就是指由一个代理主题来操作真实主题，真实主题执行具体的业务操作，而代理主题负责其他相关业务的处理。比如我们在进行删除操作的时候需要检验一下用户是否登陆，我们可以删除看成主业务，而把检验用户是否登陆看成其相关业务
【转】理解Javascript 系列 gcc2ge JavaScript
理解Javascript_13_执行模型详解摘要: 在《理解Javascript_12_执行模型浅析》一文中,我们初步的了解了执行上下文与作用域的概念，那么这一篇将深入分析执行上下文的构建过程，了解执行上下文、函数对象、作用域三者之间的关系。函数执行环境简单的代码:当调用say方法时，第一步是创建其执行环境，在创建执行环境的过程中，会按照定义的先后顺序完成一系列操作:1.首先会创建一个
Subsets II hcx2013 set
Given a collection of integers that might contain duplicates, nums, return all possible subsets. Note: Elements in a subset must be in non-descending order. The solution set must not conta
Spring4.1新特性——Spring缓存框架增强 jinnianshilongnian spring4
目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
shell嵌套expect执行命令 liyonghui160com
一直都想把expect的操作写到bash脚本里,这样就不用我再写两个脚本来执行了,搞了一下午终于有点小成就,给大家看看吧. 系统:centos 5.x 1.先安装expect yum -y install expect 2.脚本内容: cat auto_svn.sh #!/bin/bash
Linux实用命令整理 pda158 linux
0. 基本命令　　linux 基本命令整理　　1. 压缩解压　　tar -zcvf a.tar.gz a #把a压缩成a.tar.gz 　　tar -zxvf a.tar.gz #把a.tar.gz解压成a 　　2. vim小结　　2.1 vim替换　　:m,ns/word_1/word_2/gc
独立开发人员通向成功的29个小贴士 shoothao 独立开发
概述：本文收集了关于独立开发人员通向成功需要注意的一些东西,对于具体的每个贴士的注解有兴趣的朋友可以查看下面标注的原文地址。明白你从事独立开发的原因和目的。保持坚持制定计划的好习惯。万事开头难，第一份订单是关键。培养多元化业务技能。提供卓越的服务和品质。谨小慎微。营销是必备技能。学会组织，有条理的工作才是最有效率的。 “独立
JAVA中堆栈和内存分配原理 uule java
1、栈、堆 1.寄存器：最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制.2. 栈：存放基本类型的变量数据和对象的引用，但对象本身不存放在栈中，而是存放在堆（new 出来的对象）或者常量池中（字符串常量对象存放在常量池中。）3. 堆：存放所有new出来的对象。4. 静态域：存放静态成员（static定义的）5. 常量池：存放字符串常量和基本类型常量（public static f

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

你可能感兴趣的:(ES6实现图片切换特效（图片墙效果）)