zoukankan      html  css  js  c++  java
  • Jquery制作网页百度换肤,更换背景的效果

    图片自行查找搜索,更改JQ的引入链接

     

    <!DOCTYPE html>

    <html lang="en">

     

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>更换背景</title>

    <link rel="stylesheet" type="text/css" href="css.css">

    </head>

     

    <body>

    <div id="skin"></div>

    <div class="box">

    <button type="button" id="btn"

    style="height: 50px; 100px;border-radius: 20%;background-color:springgreen ;">点击换肤</button>

    <ul class="box-top">

    <li><img src="img/big/0.jpg"></li>

    <li><img src="img/big/1.jpg"></li>

    <li><img src="img/big/2.jpg"></li>

    <li><img src="img/big/3.jpg"></li>

    </ul>

     

    <ul class="box-center">

    <li><img src="img/logo.png"></li>

    <li><img src="img/search.png"></li>

    </ul>

    </div>

     

    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>

    <script type="text/javascript">

    $(function () {

    $("#btn").click(function () {

    $(".box-top").slideToggle();

    })

     

    $(".box-top>li").click(function () {

    var index = $(this).index();

    $("#skin").css("background-image", "url(img/big/" + index + ".jpg)")

    console.log(index);

    })

    })

    </script>

    </body>

    </html>

     

    分割线——————————————————————以下是CSS

    *{

    margin: 0;

    padding: 0;

    }

    li{

    list-style: none;

    }

    #skin{

    position: fixed;

    top: 0;

    left: 0;

    100%;

    height: 100%;

    background-image: url(img/big/0.jpg);

    background-position: center 0;

    background-repeat: no-repeat;

    background-size:cover;

    /* background-size:contain; */

     

     

    }

    .box{

    100%;

    height: 100%;

    position: relative;

    z-index: 10;

    }

    .box-top{

    overflow: hidden;

    900px;

    height: 120px;

    margin: 0 auto;

    background-color: lightgrey;

    }

    .box-top>li>img{

    float: left;

    height: 100px;

    200px;

    background-size:cover;

    margin:10px 0 0 20px;

    }

     

    .box-center{

    margin-left: 25%;

    }

  • 相关阅读:
    Linux之lsof命令
    lnmp一键安装的卸载
    MySQL密码忘了怎么办?MySQL重置root密码方法
    LNMP状态管理命令
    perl5 第一章 概述
    行政级别详解
    http://dl.fedoraproject.org/pub/epel/7/x86_64/,开源软件清单list
    Linux Centos 系统上安装BT客户端 Transmission
    在VPS上安裝BT軟體Transmission
    What is a good EPUB reader on Linux
  • 原文地址:https://www.cnblogs.com/dax520/p/13961856.html
Copyright © 2011-2022 走看看