jquery实现照片墙

最新推荐文章于 2021-07-23 12:08:37 发布

ephemeral_x

最新推荐文章于 2021-07-23 12:08:37 发布

阅读量780

点赞数

分类专栏：前端小案例文章标签： jquery javascript css3

本文链接：https://blog.csdn.net/ephemeral_x/article/details/118065887

版权

前端小案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

demo实现效果

点击一张图后此图变大，再次点击恢复多图照片墙。

在这里插入图片描述

部分代码

<body>
    <div class="wrapper">
        <ul class="wrapUl">
            <!-- li*25>div>img -->
            <!-- 在 js 中用 for循环 生成 -->
        </ul>
    </div>
    <script src="./jquery.js"></script>
    <script src="./demo.js"></script>
</body>

var wrapUl = $('.wrapUl');
var wrapW = parseInt(wrapUl.css('width'));
var wrapH = parseInt(wrapUl.css('height'));
var liW = wrapW / 5;
var liH = wrapH / 5;

creatDom();
// 实现多图随机展示
// 两个for循环插入 25 个li结构
// 利用 transform 属性使照片旋转不同角度，看上去排列散乱。
function creatDom(){
    for(var i = 0; i < 5; i++){
        for(var j = 0; j < 5; j++){
            $('<li><div class="box"><img src=""></div></li>')
            .css({
                'width': liW + 'px',
                'height': liH + 'px',
                'left': j*liW + 'px',
                'top': i*liH + 'px',
                'transform': 'scale(0.9) rotate('+ (Math.random() * 40 - 20) +'deg)' + 
                    'translateX(' + (30 * j - 60) + 'px)' +
                    'translateY(' + (30 * i - 60) + 'px)' +
                    'translateZ(-' + Math.random() * 500 + 'px)'
            })
            .find('img').attr('src','./img/bg' + (i*5+j) + '.jpg')
            .end()
            .appendTo(wrapUl);
        }
    }
    bindEvent();
}

function bindEvent(){
    var change = true;
    // 绑定点击事件
    // change 作为一个指示，为true时 小图-->大图，为false时 大图-->小图
    $('li').on('click',function(){
        if(change){
            // 小图 ->大图
            var bgImg = $(this).find('img').attr('src');
            var bgLeft = 0;
            var bgTop = 0;
            // jQuery each() 方法
            $('li').each(function(index){
                var $this = $(this);
                // jQuery delay() 方法
                $this.delay(10*index).animate({'opacity': 0},200,function(){
                    $this.css({
                        'transform': 'rotate(0deg)' + 
                        'translateX(0px)' +
                        'translateY(0px)' +
                        'translateZ(0px)'
                    });
                    $this.find('.box').css({
                        'transform':'scale(1)'
                    });        
                    // 拼图
                    $this.find('img').attr('src',bgImg).css({
                        'position':'absolute',
                        'width':wrapW + 'px',
                        'height': wrapH + 'px',
                        'left': -bgLeft  + 'px',
                        'top': -bgTop + 'px'
                    });
                    bgLeft += liW;
                    if(bgLeft >= wrapW){
                        bgTop += liH;
                        bgLeft = 0;
                    }
                    $this.animate({'opacity':1},200);
                })
            })
            change = false;
        }else{
            // 大图 -> 小图    
            change = true;
            $('li').each(function(index){
                //console.log(index);
                var j = index % 5;
                var i = Math.floor(index/5);
                var $this = $(this);
                $this.delay(10*index).animate({'opacity': 0},200,function(){
                    $this.css({
                        'transform': 'scale(0.9)rotate('+ (Math.random() * 40 - 20) +'deg)' + 
                            'translateX(' + (30 * j - 60) + 'px)' +
                            'translateY(' + (30 * i - 60) + 'px)' +
                            'translateZ(-' + Math.random() * 500 + 'px)'
                    });
                    $this.find('.box').css({
                        'transform':'scale(0.9)'
                    });
                    
                    $this.find('img').attr('src','./img/bg' + index + '.jpg').css({
                        'position': 'absolute',
                        'width': '100%',
                        'height': '100%',
                        'left': 0,
                        'top': 0
                    });
                    $this.animate({'opacity':1},200);
                })
            })
        }
    })
}

jQuery each() 方法

$(selector).each(function(index,element))

function(index,element)--->为每个匹配元素规定运行的函数。
							index		选择器的 index 位置
							element		当前的元素（也可使用 "this" 选择器）

jQuery delay() 方法

$(selector).delay(speed,queueName)

			speed		  可选。规定延迟的速度。
			queueName	  可选。规定队列的名称。

可在 github 上获取全部代码

ephemeral_x

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jquery实现照片墙

实现好看的照片墙【JQuery】
复制链接

扫一扫

专栏目录

jquery实现照片墙

demo实现效果

部分代码

“相关推荐”对你有帮助么？