百度换肤JavaScript功能

版权声明:官方:www.bugs-net.cn https://blog.csdn.net/qq_41514928/article/details/83037116

百度换肤JavaScript功能


CSS-code:

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a{
            color: red;
            text-decoration: none;
        }
        body{
            background: url(./images/1.png);
            background-size: cover;
        }
        .nav{
            width: 100%;
            height: 40px;
            background: rgba(255, 255, 255, 0.4);
            border-bottom: 1px solid #ccc;
        }
        .navIn{
            width: 100px;
            height: 40px;
            margin: 0 auto;
            line-height: 40px;
        }
        .shadow{
            width: 100px;
            height: 100px;
            background: transparent;
            position: fixed;
            left: 0; 
            top: 0;
            display: none;
        }
        .menu{
            width: 1000px;
            height: 200px;
            background: #fff;
            position: absolute;
            left: 50%;
            top: -200px;
            margin-left: -500px;
            text-align: center;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            transition:top 1s;/*点击弹出的速度*/
        }
        .menu img{
            width: 120px;
            margin-top: 50px;
            cursor:pointer;
        }
    </style>

HTML-code:

<body id="bg">
    <nav class="nav">
        <div class="navIn">
            <a id="btn" href="javascript:;">点击换肤</a>
        </div>
    </nav>
    <div id="shadow" class="shadow"></div>
    <div id="menu" class="menu">
    <!--图片路径-->
        <img src="./images/1.png" alt="">
        <img src="./images/2.jpg" alt="">
        <img src="./images/3.jpg" alt="">
        <img src="./images/4.jpg" alt="">
        <img src="./images/5.jpg" alt="">
    </div>

JavaScript-code:

    <script type="text/javascript">
    /*获取属性*/
        var oBg = document.getElementById('bg');
        var oBtn = document.getElementById('btn');
        var oShadow = document.getElementById('shadow');
        var oMenu = document.getElementById('menu');
        var oImg = oMenu.getElementsByTagName('img');

        oBtn.onclick = function(){
            oShadow.style.display = 'black';
            oMenu.style.top = '0px';
        }
        oShadow.onclick = function(){
            oShadow.style.display = 'none';
            oMenu.style.top = '-210px';
        }
        oImg[0].onclick = function(){
            oBg.style.backgroundImage = 'url(./images/1.png)';//url(./images/1.png)这个是图片的路径,点击之后的图片路径。
        }
        oImg[1].onclick = function(){
            oBg.style.backgroundImage = 'url(./images/2.jpg)';
        }
        oImg[2].onclick = function(){
            oBg.style.backgroundImage = 'url(./images/3.jpg)';
        }
        oImg[3].onclick = function(){
            oBg.style.backgroundImage = 'url(./images/4.jpg)';
        }
        oImg[4].onclick = function(){
            oBg.style.backgroundImage = 'url(./images/5.jpg)';
        }

    </script>

效果截图:
在这里插入图片描述
在这里插入图片描述

详情:
还有JavaScript特效功能无法以动态图演示出来,如果需要预览可以通过下方下载源代码地址进行下载到你到desktop上在进行本地预览,谢谢!
希望有更多前端编程爱好者加入我们到官方群聊一起交流:773680934!

QQ:1733454706!

源代码下载:https://share.weiyun.com/5SMMoPu

展开阅读全文

没有更多推荐了,返回首页