完成一个个人博客，博客头像可上传本地图片；部分图片实现点击看大图功能

最新推荐文章于 2022-08-29 17:13:05 发布

叫我姜同学

最新推荐文章于 2022-08-29 17:13:05 发布

阅读量1.3k

点赞数 2

分类专栏： IM Web训练营前端文章标签：博客

本文为 @叫我姜同学原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/jiangcheng2016/article/details/70664656

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

IM Web训练营

5 篇文章 0 订阅

订阅专栏

完成一个个人博客，博客头像可上传本地图片；部分图片实现点击看大图功能
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="boke">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jiangsir</title>
    <link rel="stylesheet" href="style.css">
    <style type="text/css">
        /*css层叠样式列表  css样式*/
        *{  /* * 通配符 所有元素  为了减少元素默认边距的干扰  直接全部归为零*/
            margin: 0;
            padding:0;

        }

        #Main{
            width: 1000px;
            height: 640px;
            /*background: red;*/
            margin: 30px auto 0px ;/*上外边距 左右 下*/


        }
        #Main  ul li{
            list-style: none;/*列表样式*/
            width: 288px;
            height: 180px;
            /*border: /*粗细 样式（实线）颜色 */
            float: left;/*左浮动*/
            margin: 10px 17px;
            box-shadow:5px 5px 10px #000;
            /*css3盒子阴影 ：水平偏移 垂直偏移 阴影边距 颜色*/
            border: 4px solid #fff;
            cursor: pointer;/*鼠标样式*/
        }
        .gray{
            width:100%;
            height: 100%;
            background: rgba(0,0,0,0.5);/*rgb 红 绿 蓝 a透明度（0-1）*/
            position: absolute;/*绝对定位 改变盒子的位置*/
            left: 0px;
            top:0px;
            display: none;
            /*定位 1、找到需要改变位置的盒子 给它一个绝对定位
                    2、找到这个盒子改变位置的参照物 给它一个相对定位（如果此盒子有定位属性 那么则不需要给）,如果往父级一直找不到定位属性，那么定位的父级盒子是body
            */
        }
        .showImg{
            width: 650px;
            height: 405px;
            position: absolute;
            top: 100px;
            left:50%;
            margin-left: -325px;
            padding:10px;
            background:white;
            display: none;
        }
        .showImg img.but_l{position: absolute;top:170px;left: -70px;cursor: pointer;}
        .showImg img.but_r{position: absolute;top:170px;right:-70px;cursor: pointer;}
     </style>
    <script src="jquery-3.2.0.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="wrap">

            <div id="heading">
                <h1>jiangsir</h1>
            </div>
            <div id="user">
                <img src="images/s8.jpg" alt="用户头像" width="160" height="160">
                <span>点击更换头像</span>
            </div>


    </div>
    <div id="cover">
        <div class="bg"></div>
        <div class="bp">
            <div id="preview">
                <span class="close-cover">×</span>
                <img id="imghead" src="images/s8.jpg" alt="用户头像" width="200" height="200">
                <p>
                    <span>更换头像：</span>
                    <input type="file" onchange="previewImage(this)">
                </p>
            </div>
        </div>
    </div>
    <div id="Main">
        <ul>
            <!--bigSrc 是自定义属性-->
            <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s1.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big1.jpg" alt=""></li>
            <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s2.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big2.jpg"alt=""></li>
            <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s3.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big3.jpg"alt=""></li>
            <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s4.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big4.jpg"alt=""></li>
            <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s5.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big5.jpg"alt=""></li>
            <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s6.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big6.jpg"alt=""></li>
            <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s7.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big7.jpg"alt=""></li>
            <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s8.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big8.jpg"alt=""></li>
            <li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s9.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big9.jpg"alt=""></li>
        </ul>
    </div>
    <div class="gray"><!--灰色幕布--></div>
    <div class="showImg"><!--大图展示-->
        <img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/big1.jpg" class="show_img">
        <img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/dirl.png" class="but_l">
        <img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/dirr.png" class="but_r">
    </div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
    var bImg = "";
    var index = 0;//初始化下标
        $("#Main ul li").click(function(){
            index = $(this).index();
            //alert();
            $(".gray").show();
            $(".showImg").show();
            bImg = $(this).find("img").attr("bigSrc");
            $(".showImg img.show_img").attr("src",bImg);
        });
        $(".gray").click(function(){
            $(".gray").hide();/*隐藏元素*/
            $(".showImg").hide();
        })
        $(".but_l").click(function(){ 
            index --;//下标逐渐减小
            if (index<0) {
                alert("这是第一张图片");
                index = 0;
            }

            bImg = $("#Main ul li").eq(index).find("img").attr("bigSrc");
            $(".showImg img.show_img").attr("src",bImg);
        })
        $(".but_r").click(function(){
            index ++;
            if (index>8) {
                alert("这是最后一张图片");
                index = 8;
            }
            bImg = $("#Main ul li").eq(index).find("img").attr("bigSrc");
            $(".showImg img.show_img").attr("src",bImg);
        })
    </script>
</html>