前端小练习:jQuery酷炫照片墙

标签: 前端

jQuery酷炫照片墙

效果展示:
在这里插入图片描述
HTML代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>photo</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="wrapper">
        <ul class="wrapul">

        </ul>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>

css代码:

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body,
.wrapper {
    width: 100%;
    height: 100%;
    background-color: #cecece;
}

.wrapul {
    width: 70%;
    height: 70%;
    position: relative;
    margin: 50px auto;
    /* border: 1px solid black; */
}

.wrapul li {
    transform-style: preserve-3d;
    position: absolute;
    /* border: 1px solid black; */
    background-color: #ffffff;
}

.box {
    width: 100%;
    height: 100%;
    /* 缩放 */
    transform: scale(0.9);
}

img {
    width: 100%;
    height: 100%;
}

jQuery代码:

var wrapul = $('.wrapul');
// 取css值
var wrapW = parseInt(wrapul.css('width'));
var wrapH = parseInt(wrapul.css('height'));
var liW = wrapW / 5;
var liH = wrapH / 5;
createDom();

function createDom() {
//利用for循环插入图片
    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,
                    'top': i * liH,
                    'transform': 'scale(0.9) rotate(' + (Math.random() * 50 - 30) + 'deg)' +
                        'translateX(' + (3 * j - 60) + 'px)' +
                        'translateY(' + (30 * i - 60) + 'px)' +
                        'translateZ(' + Math.random() * 500 + 'px)'
                })
                //找到每张图片的地址
                .find('img').attr('src', './img/' + (i * 5 + j) + '.jpg')
                .end()
                //把li放到ul中去
                .appendTo(wrapul);
        }
    }
    bindEvent();
}
//图片点击事件
function bindEvent() {
    var change = true;
    wrapul.find('li').on('click', function() { //绑定事件
        if (change) {
            //小图变大图
            //这里的this为li,找到点击该图片的地址
            var bgImg = $(this).find('img').attr('src');
            var bgLeft = 0,
                bgTop = 0;
            $('li').each(function(index) {
                var $this = $(this);
                
                //让旋转的图片回到原位
                $this.delay(10 * index).animate({ 'opacity': 1 }, 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,
                        'top': -bgTop
                    });
                    bgLeft += liW;
                    if (bgLeft >= wrapW) {
                        bgTop += liH;
                        bgLeft = 0;
                    }
                    //显示
                    $this.animate({ 'opacity': 1 }, 200);
                })

            })
            change = false;
        } else {
            //大图变小图
            change = true;
            //inde = i * 5 + j;
            $('li').each(function(index) {
                var j = index % 5;
                var i = Math.floor(index / 5);
                var $this = $(this);
                //再次点击,从一张大图变成若干个小图,整齐排列
                $(this).animate({ 'opacity': 1 }, 200, function() {
                    $(this).find('img').css({
                        'position': 'absolute',
                        'width': '100%',
                        'height': '100%',
                        'left': 0,
                        'top': 0
                    });
                    $this.find('img').attr('src', './img/' + index + '.jpg');
                    //旋转角度
                    $(this).css({
                        // 'width': liW + 'px',
                        // 'height': liH + 'px',
                        // 'left': j * liW,
                        // 'top': i * liH,
                        'transform': 'scale(0.9) rotate(' + (Math.random() * 50 - 30) + 'deg)' +
                            'translateX(' + (3 * j - 60) + 'px)' +
                            'translateY(' + (30 * i - 60) + 'px)' +
                            'translateZ(' + Math.random() * 500 + 'px)'
                    });
                    $this.find('.box').css({
                        'transform': 'scale(0.9)'
                    });
                })

            })

        }
    })


}
方法 解释
transform transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。W3scool
Math.random() 产生随机数。编程狮
translate 绘图函数编程狮
attr attr() 方法设置或返回被选元素的属性和值。编程狮
animate animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。编程狮
版权声明:本文为weixin_39233022原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39233022/article/details/105280277

智能推荐

Rtthread学习笔记(十三)RT-Thread Studio开启硬件看门狗Watchdog

一、开启硬件看门狗Watchdog 1、配置RT-Thread Settings 2、开启stm32f1xx_hal_conf.h中的宏定义 3.使用RT接口函数初始化硬件看门狗...

TYVJ 4864 天天去哪吃 || 清北学堂金秋杯大奖赛

题目描述: 记录一下i这个值上次出现的位置在哪里,就是pre...

java反编译

jvm 把Boolean类型的值flag当做int类型处理。​​​ Foo.java: 由 class 文件生成 jasm 文件:java -jar asmtools.jar jdis Foo.class > Foo.jasm  修改jasm文件: 执行反编译: java -jar jd-gui-1.6.6.jar File 打开Foo.class文件:b修改为2 重新执行java...

【学习笔记】03-v-html的学习和示例

v-html的认识和使用 示例: 显示结果: 注意:v-html是有复制的...

Java实现在线考试系统(系统介绍)

1.和现在有的考试系统有以下几种优势: a.和现在有的系统比较起来,本系统有科目、章节、老师、学生、班级等信息的管理,还有批阅试卷查看已批阅试卷等。传统的考试系统划分并不细,业务功能简单。 b.和学校的考试系统还有外面的考试系统比较起来,本系统是B/S结构,学校的考试系统一般为C/S结构,性能方面不如B/S结构,并且C/S接口需要安装客户端,客户端压力很大,我的系统只需要电脑具有浏览器,在同一局域...

猜你喜欢

计算机视觉--多视几何初步尝试

基础矩阵的原理 K和K’分别是两个相机的参数矩阵。p和p’是X在平面π的坐标表示。所以可以得出 具体计算过程 代码: #!/usr/bin/env python coding: utf-8 from PIL import Image from numpy import * from pylab import * import numpy as np from imp ...

java初学者怎么学习才可以快速入门

java初学者怎么学习才可以快速入门 一、了解JAVA 我们要知道:Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言。 Java之父:詹姆斯·高斯林 1.1 java的三个体系 Java SE(Java Platform Standard Edition)。Java SE 以前称为 J2SE。它允许开发和部署在桌面、服务器、嵌入式环境...

字段属性之主键&增删改查&自增长&唯一键约束

字段属性之主键&自增长&唯一键约束 主键 主键:primary key 主要的键 一张表中只有一个字段可以使用对应的键,用来唯一的约束该字段里面的数据,不能重复,这种称之为主键 一张表只能最多一个主键 增加主键 SQL操作中有多种方式增加主键大体分为三种 1.在创建表的时候直接在字段之后跟primary key关键字(主键本身不允许为空) 优点:非常直接:缺点:只能使用一个字段作为...

linux下 基于libmad的socket多用户mp3音频在线播放服务器

在众多大神的帮助下,这个在线播放流媒体服务器终于完成啦。。。。 这个mp3流媒体服务器设计的思路是,服务器程序server用多线程实现和多个客户端的通信(这是必然的),然后发送给客户端当前的音频列表公客户端选择,之后根据k客户端的选择给多个客户端传输相应mp3文件的数据,同时,客户端进行实时地音频解码并播放。 关于libmad开源mp3音频解码库的使用,见上一篇博客吧。。。。 在服务器程序这一端,...

Nginx

Nginx Nginx简介: Nginx是一个高性能的http和反向代理服务器,特点是有内存少,并发能力强,事实上Nginx的并发能力确实在同类型网页服务器中表现较好, Nginx用作web服务器:Nginx可以作为静态页面的web服务器,同时还支持CGI语言,但不支持java,java程序只能通过Tomcat配合完成。Nginx专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率,能经受...