[读码时间] 模拟select控件

说明：代码取自网络！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>模拟select控件</title>
    <style>
        html,body{
            height:100%;
            overflow:hidden;
        }
        body,div,form,h2,ul,li{
            margin:0;
            padding:0;
        }
        ul{
            list-style-type:none;
        }
        body{
            background:#23384e;/*深蓝*/
            font:12px/1.5 \5fae\8f6f\96c5\9ed1;
        }
        #search, #search form, #search .box, #search .select, #search a{
            background:url(img/search.jpg) no-repeat;/*不重复*/
        }
        #search, #search .box, #search form{
            height:34px;
        }
        #search{
            position:relative;/*相对定位*/
            width:350px;
            margin:10px auto;
        }
        #search .box{
            background-position:right 0;
        }
        #search form{
            background-repeat:repeat-x;
            background-position:0 -34px;/*上移*/
            margin:0 20px 0 40px;
        }
        #search .select{
            float:left;
            color:#fff;
            width:190px;
            height:22px;
            cursor:pointer;
            margin-top:4px;
            line-height:22px;
            padding-left:10px;
            background-position:0 -68px;
        }
        #search a{
            float:left;
            width:80px;
            height:24px;
            color:#333;
            letter-spacing:4px;
            line-height:22px;
            text-align:center;
            text-decoration:none;
            background-position:0 -90px;
            margin:4px 0 0 10px;
        }
        #search a:hover{
            color:#f60;
            background-position:-80px -90px;
        }
        #search .sub{
            position:absolute;  
            top:26px;
            left:40px;
            color:#fff;
            width:198px;
            background:#2b2b2b;
            border:1px solid #fff;
            display:none;
        }
        #search .sub li{
            height:25px;
            line-height:24px;
            cursor:pointer;
            padding-left:10px;
            margin-bottom:-1px;
            border-bottom:1px dotted #fff;
        }
        #search .sub li.hover{
            background:#8b8b8b;/*黑色*/
        }
    </style>
    <script>
        window.onload = function () {
            var oSelect = document.getElementsByTagName("span")[0];
            var oSub = document.getElementsByTagName("ul")[0];
            var aLi = oSub.getElementsByTagName("li");
            var i = 0;

            oSelect.onclick = function (event) {
                var style = oSub.style;
                style.display = style.display == "block" ? "none" : "block";//切换类值
                (event || window.event).cancelBubble = true;//ie中event是window的对象
            };
            for (i = 0; i < aLi.length; i++) {
                aLi[i].onmouseover = function () {
                    this.className = "hover";
                };
                aLi[i].onmouseout = function () {
                    this.className = "";
                };
                aLi[i].onclick = function () {
                    oSelect.innerHTML = this.innerHTML;
                }
            }
            document.onclick = function () {
                oSub.style.display = "none";
            };
        };
    </script>
</head>
<body>
    <div id="search">
        <div class="box">
            <form>
                <span class="select">请选择游戏名称</span>
                <a href="javascript:;">搜索</a>
            </form>
        </div>
        <ul class="sub">
            <li>地下城与勇士</li>
            <li>魔兽世界（国服）</li>
            <li>魔兽世界（台服）</li>
            <li>热血江湖</li>
            <li>神鬼传奇</li>
            <li>大话西游II</li>
            <li>QQ幻想世界</li>
        </ul>
    </div>
</body>
</html>
View Code

 

posted @ 2017-03-02 02:39  sx00xs  阅读(142)  评论(0)  编辑  收藏  举报