跨时空的相遇~为她制作一个专属的QQ空间相册（附源代码）

街三仔

已于 2022-09-14 09:46:54 修改

阅读量5.6k

点赞数 6

分类专栏： Web前端学习文章标签： html 前端

于 2022-03-17 18:04:29 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Oh_Python/article/details/123555817

版权

Web前端学习专栏收录该内容

9 篇文章 33 订阅

订阅专栏

本文档详细介绍了如何使用HTML、CSS和JavaScript实现一个简易的QQ空间相册功能，包括点击图片放大、图片切换等。通过示例代码，展示了如何处理图片切换时的边界情况，提供了一个学习JavaScript和jQuery操作的实践案例。

摘要由CSDN通过智能技术生成

目录

一、实现的功能和展示

二、前期准备

三、源代码

一、实现的功能和展示

点击某个图片的时候，图片放大
实现图片的切换，当我们在第一张继续往左边点击的时候就会提示你这已经是第一张了，最后一张也是同样的效果

注意：此次制作的是一个简易的QQ空间相册，其中主要是提供一个制作QQ空间的思路和学习更多有关于JavaScript和jQurey的操作。

当在第一张照片或最后一张照片的位置继续向左或向右点击图片切换按钮时，会弹出提示框

二、前期准备

1、任意9张照片（如果想增多照片的话可以再添加一个ul标签，同时还要修改一些功能，这就需要大家更加深入的去学习了），其中7张照片放在相册内，1张照片用来做头像，另一张用来做背景

2、两个切换按钮图片和QQ空间log图片（以下是博主提供的照片，也可以自己去找喜欢的图片用做切换按钮哦~）

3、创建好一个文件夹，并在这个文件夹里分别创建一个css文件夹，image文件夹，js文件夹和QQ空间.html文件

css文件夹内创建一个QQ空间.css文件
image文件夹中放入我们准备的所有图片
js文件夹中放入jQuery的文件（如果不知道如何放入jQuery中文件可参考这篇文章：jQuery的安装和基本使用）和创建一个QQ空间.js文件
QQ空间.html文件用来写入QQ空间页面的内容

例：

三、源代码

QQ空间.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jquery库-->
    <script src="js/jquery-1.10.2.min.js"></script>
    <!--引入外部的js-->
    <script src="js/QQ空间.js"></script>
    <!--从外部引入css样式-->
    <link href="css/QQ空间.css" rel="stylesheet" type="text/css">
    <style>
        a{
            position: absolute;
        }
    </style>
</head>
<body>
    <!--整个网页-->
    <div>
        <!--头部导航栏-->
        <div class="header">
            <img src="image/qq_logo.png" class="logo">
            <!--列表-->
            <ul>
                <li>QQ空间</li>
                <li>个人中心</li>
                <li>我的主页</li>
                <li>好友</li>
                <li>游戏</li>
                <li>装扮</li>
            </ul>
        </div>
        <!--背景图片个人信息导航栏-->
        <div class="bg-content">
            <div class="bg"></div>
            <!--会变形-->
            <!--<img src="image/bj1.png">-->
            <div class="info">
                <img src="image/log.jpg" class="logo">
                <!--列表-->
                <ul>
                    <li>主页</li>
                    <li>日志</li>
                    <li>相册</li>
                    <li>留言板</li>
                    <li>说说</li>
                    <li>个人档</li>
                    <li>音乐</li>
                    <li>更多</li>
                </ul>
            </div>
        </div>
        <!--相册内容-->
        <div class="qqContent">
            <div class="title">相册</div>
            <!--<div></div>-->
            <ul class="image_list">
                <!--<div></div>-->
                <li>
                    <img src="image/1.jpg" class="imgs">
                    <div class="date">2021/1/8</div>
                </li><li>
                    <img src="image/2.jpg" class="imgs">
                    <div class="date">2021/1/9</div>
                </li>
                <li>
                    <img src="image/3.jpg" class="imgs">
                    <div class="date">2021/1/10</div>
                </li>
                <li>
                    <img src="image/4.jpg" class="imgs">
                    <div class="date">2021/1/11</div>
                </li>
                <li>
                    <img src="image/5.jpg" class="imgs">
                    <div class="date">2021/1/11</div>
                </li>                <li>
                    <img src="image/6.jpg" class="imgs">
                    <div class="date">2021/1/11</div>
                </li>
                <li>
                    <img src="image/7.jpg" class="imgs">
                    <div class="date">2021/1/11</div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

QQ空间.css

/* *所有外边距内边距都为0 */
*{
    margin: 0;
    padding: 0;
}
.header{
    width: 100%;
    height: 50px;
    background-color: black;
    /*写在父级，直系子级在同一水平线上*/
    display: flex;
}
.header .logo{
    width: 35px;
    /*auto是适配宽度，不让图片变形*/
    height: auto;
    /*上下 左右*/
    margin: 8px 0;
    padding-left: 5%;
}
.header li{
    color: white;
    float: left;
    /*去掉列表的小圆点*/
    list-style: none;
    margin: 16px 0;
    padding-left: 50px;
    /*padding-right: 50px;*/
}
/*指定第一个元素样式 括号里面的内容是从1开始的 nth-child(1)伪类:*/
.header li:nth-child(1){
    padding-left: 0;
}
.bg-content{
    /*相对定位，一般写在父级元素上*/
    position: relative;
    height: 265px;
}
.bg-content .bg{
    /*背景图片*/
    width: 100%;
    height: 230px;
    /*默认铺满宽度*/
    background-image: url("../image/bj1.png");
}
.info{
    display: flex;
    /*绝对定位，一般写在子级元素上面*/
    margin-left: 7%;
}
.info li{
    float: left;
    list-style: none;
    margin-left: 20px;
}
.info .logo{
    width: 120px;
    height: 120px;
    position: absolute;
    bottom: 0;
}
.info ul{
    /*上右下左*/
    margin: 10px 0 0 120px;
}
.qqContent{
    width: 90%;
    height: 700px;
    background-color: #f2f2f2;
    margin: 15px 5% 0 5%;
}
.qqContent .title{
    padding: 15px 0 0 6%;
}
.qqContent li{
    list-style: none;
    background-color: #353a54;
    width: 179px;
    float: left;
    margin: 1% 0 0 1%;
}
.qqContent .imgs{
    width: 179px;
    height: 128px;
}
.qqContent .date{
    color: #ccc7d9;
    width: 179px;
    text-align: center;
}

QQ空间.js

// 功能：
// 1.点击某个图片的时候，图片放大
// 2.实现图片的切换，当我们在第一张继续往左边点击的时候就会提示你这已经是第一张了，最后一张也是同样的效果
// 思路：1.添加盒子，在点击某个图片的时候把图片添加到盒子中去
// 思考：怎样知道点击是哪张图片
// 把图片添加到盒子中去
// 2.图片切换，判断是第一张图片或者是最后一张图片
// 替换图片
//1.通过jquery的方式 加载dom文档
$(function () {
    //添加一个盒子（元素）before(添加在指定元素的外面的前面) append（添加到指定元素的里面）
    $(".qqContent .image_list").before("<div class='div_photo'></div>");
    $(".div_photo").css({"text-align":"center","position":"relative"})
    //点击
    $(".image_list .imgs").click(function () {
        //需要知道点击的是哪张图片 this = .image_list .imgs
        //attr()如果只写了一个参数那么就是获取属性，如果写了两个参数，那么就是修改属性
        var url = $(this).attr("src");
        $(".div_photo").append('<div class="photo-content">' +
            '<img src="image/left.png" class="changePhoto left">' +
            '<img src="'+url+'" class="photos">' + // src = url不可以的
            '<img src="image/right.png" class="changePhoto right">' +
            '</div>');
        //设置左右按钮图片大小
        $(".changePhoto").css({"width":"50px","height":"auto"});
        //设置图片的大小
        $(".photos").css({"width":"500px","height":"342px"});
        //左右按钮定位在div_photo
        $(".left").css({"position":"absolute","top":"150px","left":"310px"});
        $(".right").css({"position":"absolute","top":"150px","right":"310px"});
        //点击会不断图片，把之前的图片都隐藏掉 prevAll() 之前的同级元素
        $(".photo-content").prevAll().hide();
        //通过正则表达式去匹配图片 第一个图片 下标1 返回的是一个数组
        // /正则表达式的主体/  image/1.jpg \转义字符 （）包含字符 \S匹配任何空白字符 *匹配0次或者多次
        var imgs = url.match(/image\/(\S*)\./);
        var index = imgs[1];
        $(".left").click(function () {
            if(index == 1){
                alert("这已经是第一张图片了");
            }else{
                index--;
                $(".photos").attr("src","image/"+index+".jpg")
            }
        })
        $(".right").click(function () {
            if(index == 7){
                alert("这已经是最后一张图片了");
            }else{
                index++;
                $(".photos").attr("src","image/"+index+".jpg")
            }
        })

    })

})

关注

6
点赞
踩
29

收藏

觉得还不错? 一键收藏
打赏
8
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论 8

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

街三仔 你的鼓励是我创作的最大动力~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。