当前位置：移动技术网 > IT编程>开发语言>Jquery > jquery实现照片墙

jquery实现照片墙

2019年04月27日 | 移动技术网IT编程 | 我要评论

jquery照片墙

由15张图片构成，大致思路：随机生成所有图片-->点击其中一张变为一张大图-->点击大图又变回多张
主要用到jquery实现
先来看看效果

alt

html：

    <div class="wraper">
       <ul class="wraper-ul"></ul>
    </div>

css：

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    html,
    body,
    .wraper {
        width: 100%;
        height: 100%;
        background-color: #ececec;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wraper-ul {
        width: 80%;
        height: 80%;
        position: relative;
        perspective: 800px;
    }
    .wraper-ul li {
        position: absolute;
        transform-style: preserve-3d;
        background-color: #fff;
        cursor: pointer;
    }
    .box {
        width: 100%;
        height: 100%;
        transform: scale(0.9);
    }
    .box img {
        width: 100%;
        height: 100%;
    }

js：

    class photos {
    constructor(classname){
        this.wraper = $(classname);
        this.ulw = parseint(this.wraper.css('width'));
        this.ulh = parseint(this.wraper.css('height'));
        this.liw = this.ulw /5;
        this.lih = this.ulh /3;
        this.change = true;
        this.creatimgs();
    }
    creatimgs(){
        //行
        for(let i =0;i<3;i++){
            //列
            for(let j=0;j<5;j++){
                let lis = $("<li><div class='box'><img src='' alt=''></div></li>")
                    .css({
                        width:this.liw +'px',
                        height:this.lih +'px',
                        left:j*this.liw +'px',
                        top:i*this.lih + 'px',
                        transform:'scale(0.9) rotate('+(math.random() * 40 - 20)+'deg)'+ 
                            'translatex(' + (math.random() * 100 - 50) + 'px)' +
                            'translatey(' + (math.random() * 100 - 50) + 'px)' +
                            'translatez(' + (math.random() * 200 - 100) +'px)'
                    })
                    .find('img').attr('src','./img/'+(i*5+j+11) +'.jpg')
                    .end()
                this.wraper.append(lis);
            }
        }
        this.changeimgs();
    }
    changeimgs(){
        this.wraper.find('li').on('click',(e)=>{
            if(this.change){ //多张变一张
                let bgimg = $(e.target).attr('src');
                let bgleft =0;
                let bgtop =0;
                $('li').each((index,item)=>{
                    $(item).delay(10 * index).animate({opacity:0},200,()=>{
                        $(item).css({
                            width: this.liw +'px',
                            heigth:this.lih +'px',
                            transition: '',
                            opacity:'1',
                            transform: 'scale(1) rotate(0deg)' +
                                'translatex(0px)' +
                                'translatey(0px)' +
                                'translatez(0px)'
                        }) 
                        $(item).find('.box').css({
                            transform:'scale(1)'
                        })
                        $(item).find('img').attr('src', bgimg).css({
                            position:'absolute',
                            width:this.ulw +'px',
                            height:this.ulh +'px',
                            top: -bgtop,
                            left: -bgleft
                        });
                        bgleft += this.liw;
                        if(bgleft>=this.ulw){
                            bgtop +=this.lih;
                            bgleft =0;
                        }
                    })
                })
                this.change = false;
            }else{ //一张变多张
                this.change = true;
                $('li').each((index, item) => {
                    let j =index % 5;
                    let i =math.floor(index / 5);  
                    $(item).animate({ opacity: 0 }, 200, () => { 
                        $(item).find('img').css({
                            position: 'absolute',
                            width: '100%',
                            height: '100%',
                            top: 0,
                            left: 0
                        }) 
                        $(item).find('img').attr('src', './img/' + (index+11) + '.jpg')
                        $(item).find('.box').css({
                            transform: 'scale(0.9)'
                        })
                        $(item).css({
                            width: this.liw + 'px',
                            height: this.lih + 'px',
                            left: j * this.liw + 'px',
                            top: i * this.lih + 'px',
                            transition:'all,0.5s',
                            opacity: '1',
                            transform: 'scale(0.9) rotate(' + (math.random() * 40 - 20) + 'deg)' +
                                'translatex(' + (math.random() * 100 - 50) + 'px)' +
                                'translatey(' + (math.random() * 100 - 50) + 'px)' +
                                'translatez(' + (math.random() * 200 - 100) + 'px)'
                        })
                    })    
                })
            }
        })
    }
}
var photo = new photos('.wraper-ul');

参考自：腾讯课堂渡一教育

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

jQuery操作DOM对象的方法

# jQuery操作DOM 和增删改查 - 1.html() ```js $('ul li&... [阅读全文]
jQuery的clone()方法和data()方法

# jQuery中的clone()和data()方法 - clone() ```js $('.demo').clon... [阅读全文]
jq使用jsonp实现百度搜索

项目实现：还原百度搜索功能；项目原理：利用json回调页面传参; 什么是jsonp：就是利用<script>标签的src地址，让目标页面回... [阅读全文]
5.jQuery实现简单的on()和trigger()方法

# jQuery事件 - 1.on() ```js //1.事件类型type 2.selector 3.data... [阅读全文]
电器类电商网站分类大菜单，配色超舒服~

效果图 <!DOCTYPE html> <html lang="en"> <he... [阅读全文]
现代都市风移动端可折叠导航菜单

效果图 <!DOCTYPE html> <html lang="en"> <he... [阅读全文]
jQuery选择器的简单实现和笔记

# 引入jQuery工具库 ## 下载地址 - cdn:http://www.jq22.com/cdn/#a2 -... [阅读全文]
jQuery简单实现get()和eq()方法

# jQuery选择元素 - get() 从jQuery对象中获取某个指定的元素，返回原生的dom对象，所以不能再次链式调... [阅读全文]
水平导航-三级导航-切换流畅

效果图 <!DOCTYPE html> <html lang="en"> <he... [阅读全文]
互联网公司常用水平导航（二级导航）

效果图 <!DOCTYPE html> <html lang="en"> <he... [阅读全文]

网友评论


验证码：

jquery实现照片墙

2019年04月27日 | 移动技术网IT编程 | 我要评论

jquery照片墙

html：

css：

js：

您可能感兴趣的文章:

相关文章:

网友评论