18 百度换肤&千千音乐盒

Posted znyyy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了18 百度换肤&千千音乐盒相关的知识，希望对你有一定的参考价值。

百度换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度换肤</title>
    <style type="text/css">
        *
            padding:0;
            margin: 0;
        
        ul
            list-style:none;
        
        #bigImg
            position: fixed;
            top:0;
            left:0;
            height: 100%;
            width: 100%;
            background-image: url("images/skin1.jpg");
            background-position: center 0;
            background-repeat: no-repeat;
        
        #smallImg
            width:100%;
            height:100px;
            position: relative;
            z-index:10;
        
        #smallImg ul
            overflow: hidden;
            width:1200px;
            margin:0 auto;
            background-color: rgba(255,255,255,.5);
        
        #smallImg ul li
            float: left;
            cursor: pointer;
            height:120px;
            margin: 10px 0 10px 96px;
        
        #smallImg ul li img
            width: 180px;
            height: 120px;
        

    </style>
</head>
<body>
    <div id="bigImg"></div>
    <div id="smallImg">
        <ul>
            <li><img src="images/skin1.jpg"></li>
            <li><img src="images/skin2.jpg"></li>
            <li><img src="images/skin3.jpg"></li>
            <li><img src="images/skin4.jpg"></li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    function $(id) 
        return typeof id === ‘string‘ ? document.getElementById(id):null
    
    var imgLi = document.getElementsByTagName(‘li‘);
    for(var i = 0; i < imgLi.length; i++)
        imgLi[i].onclick = function () 
            url = this.children[0].getAttribute(‘src‘);
            $(‘bigImg‘).style.backgroundImage = `url("$url")`;
        
    
</script>
</html>

 

千千音乐盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>千千音乐盒</title>
    <style type="text/css">
        #box
            position: relative;
            width: 400px;
            margin:100px auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding:20px
        
        .footer
            text-align: center;
        
    </style>
</head>
<body>
    <div id="box">
        <div id="title">
            <h3>千千音乐盒</h3>
            <hr>
        </div>
        <div>
            <input type="checkbox">花田里犯了错<br>
            <input type="checkbox">摩羯座<br>
            <input type="checkbox">我不配<br>
            <input type="checkbox">对<br>
            <input type="checkbox">错<br>
            <input type="checkbox">心中的日月<br>
            <input type="checkbox">白色恋人<br>
            <hr>
        </div>
        <div class="footer">
            <button id="all">全选</button>
            <button id="cancel">取消选中</button>
            <button id="reverse">反选</button>
        </div>
    </div>
</body>
<script type="text/javascript">
    function $(id) 
        return typeof id === ‘string‘ ? document.getElementById(id):null
    
    window.onload = function () 
        var inputs = document.getElementsByTagName(‘input‘);
        $(‘all‘).onclick = function () 
            for(var i = 0; i < inputs.length; i++)
                inputs[i].checked = true;
            
        ;
        $(‘cancel‘).onclick = function () 
            for(var i = 0; i < inputs.length; i++)
                inputs[i].checked = false;
            
        ;
        $(‘reverse‘).onclick = function () 
            for(var i = 0; i < inputs.length; i++)
                inputs[i].checked = !inputs[i].checked;
            
        
    
</script>
</html>

 

以上是关于18 百度换肤&千千音乐盒的主要内容，如果未能解决你的问题，请参考以下文章

在HTML中。怎么样才能实现换肤的功能？

JS百度换肤案例

制作一个百度换肤效果

一个小时，零基础入门，看完这篇30行代码 教你实现百度换肤！

JavaScript第四天笔记04——JS百度换肤例子

仿酷狗音乐播放器开发日志十八——换肤功能的实现二：改变控件和窗体透明度（附挂件类源码）