换肤和动态换背景_background-image换肤-优快云博客

这段代码展示了如何使用HTML、CSS和JavaScript实现一个模态框功能，用户点击按钮后弹出图片选择，点击图片可更换页面背景。此外，还包括了一个换肤功能，通过点击侧边栏的换肤按钮显示下拉菜单，选择不同颜色改变页面背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
 
    <style>
        body{
            background: url("img/6cabfefdcbea6c7f767b5822c140484.png");
            background-size: cover;
        }
        .modal-body>img{
            width: 17%;
            height: 60px;
            margin: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">New message</h4>
            </div>
            <div class="modal-body">
                <img src="img/6cabfefdcbea6c7f767b5822c140484.png" alt="" data-dismiss="modal">
                <img src="img/3f649128243d964fab602b532ed642e.png" alt="" data-dismiss="modal">
                <img src="img/32c59856165bd7efbbb94e88594b767.png" alt="" data-dismiss="modal">
                <img src="img/fbe0e4c0c6ccf38e98d3dbbac21d2d9.png" alt="" data-dismiss="modal">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="jquery-2.2.3.min.js"></script>
<script src="bootstrap.js"></script>
<script>
 
    $('.modal-body>img').click(function(){
        var img_scr=$(this).attr('src')
        var arr=[]
        arr.push(img_scr)
        $('body').css('background-image', 'url(' + arr[0] + ')');
 
    })
</script>

换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 100%;
            height: 50px;
            background: #093;
            position: relative;
            left: 0;
            top: 0;
        }
        .app{
            font-family: helvetica neue,luxi sans,dejavu sans,Tahoma,hiragino sans gb,STHeiti,microsoft yahei;
            width: 68px;
            height: 100%;
            border-left: 1px solid #03742a;
            float: right;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            color: white;
            font-weight: 500;
            font-size: 14px;
        }
 
        .app:hover{
            opacity: 0.7;
        }
 
        .box_ul{
            position: absolute;
            right: 0;
            top: 0;
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
            display: none;
        }
        .box_ul>li{
            cursor: pointer;
            width: 68px;
            height: 50px;
            list-style: none;
            border-bottom: 1px solid #e5e5e5;
            text-align: center;
            line-height: 50px;
            background: white;
        }
        .box_ul>li:nth-child(1):hover{
            background: #ddd;
            color: white;
        }
        .box_ul>li:nth-child(2):hover{
            background: #0099CC;
            color: white;
        }
        .box_ul>li:nth-child(3):hover{
            background: #009933;
            color: white;
        }
        .box_ul>li:nth-child(4):hover{
            background: #FF9600;
            color: white;
        }
 
    </style>
</head>
<body>
<div id="box">
 
    <div class="app">换肤^</div>
    <ul class="box_ul">
        <li>换肤^</li>
        <li>蓝色</li>
        <li>绿色</li>
        <li>橙色</li>
    </ul>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
 
<script>
    $('.app').click(function(){
          $('.box_ul').show()
    })
    $(' .box_ul>li:nth-child(1)').click(function(){
        $('.box_ul').hide()
 
    })
    $(' .box_ul>li:nth-child(2)').click(function(){
        $('#box').css({
            background:'#0099CC'
        })
 
        $('.box_ul').hide()
 
    })
 
    $(' .box_ul>li:nth-child(3)').click(function(){
        $('#box').css({
            background:'#009933'
        })
        $('.box_ul').hide()
 
    });
 
    $(' .box_ul>li:nth-child(4)').click(function(){
        $('#box').css({
            background:'#FF9600'
        })
        $('.box_ul').hide()
 
    })
 
</script>
<script>
 
</script>