找回密码
当前位置：前端开发者 > 教程 > 正文

网站前端开发模板_下拉菜单 更换皮肤

2018-07-11 分类：教程 阅读(613) 评论(0)

前端开发学习网站|网站前端开发的创业前景|web前端开发网站博客

html 代码

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>前端开发 网站建设:下拉菜单</title>
    <style>
        #box {
            width: 900px;
            height: 600px;
            background: url(http://cdn.attach.qdfuns.com/notes/pics/201611/13/154059ndq62rvrrr34lf8v.jpg) no-repeat;
            margin: 50px auto;
        }
    </style>
    <script>
        window.onload = function () {
            var sele = document.getElementById(“sele”);
            var bg = document.getElementById(“box”);
            //下拉栏事件
            sele.onchange = function () {
                switch (this.value) {
                    case “1”:
                        bg.style.backgroundImage = “url(http://cdn.attach.qdfuns.com/notes/pics/201611/13/154059ndq62rvrrr34lf8v.jpg)”;
                        break;
                    case “2”:
                        bg.style.backgroundImage = “url(http://cdn.attach.qdfuns.com/notes/pics/201611/13/154059tjw4iraek0r24hx2.jpg)”;
                        break;
                    case “3”:
                        bg.style.backgroundImage = “url(http://cdn.attach.qdfuns.com/notes/pics/201611/13/154059edwuxssvf4v5v5v5.jpg)”;
                        break;
                    case “4”:
                        bg.style.backgroundImage = “url(http://cdn.attach.qdfuns.com/notes/pics/201611/13/154059jl8m6a1w9zyd5521.jpg)”;
                        break;
                }
            }
        }
    </script>
</head>
<body>
    <div id=”box”>
        <select name=”” id=”sele”>
            <option value=”1″>放逐之刃</option>
            <option value=”2″>九尾妖狐</option>
            <option value=”3″>刀锋之影</option>
            <option value=”4″>暴走萝莉</option>
        </select>
    </div>
</body>
</html>

网站前端开发简历|关于网站前端开发的参考文献|网站前端总体开发流程与设计方案

赞(0)
前端开发者 » 网站前端开发模板_下拉菜单 更换皮肤
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论