360浏览器搜索框下拉选择图片js模拟select效果

最新推荐文章于 2023-04-15 11:39:20 发布

weixin_30617737

最新推荐文章于 2023-04-15 11:39:20 发布

阅读量117

点赞数

原文链接：http://www.cnblogs.com/youtianxia/p/3857884.html

版权

最近360浏览器网址导航的主页增加了一个下拉选择图片搜索的功能，也就是用js模拟出了select的效果，今天在单位闲了无事干，就把空上功能给摸索出来了，虽然做的不是太完善，但对要求不高的用户来说，已经可以了，而且也可以为学习Js的朋友提供参考。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
#search ul {
list-style-type: none;
display: block;
width: 100px;
height: 33px;
margin: 0;
padding: 0;
border: 0px;
float: left;
}
#search li {
border: 0px;
margin: 0px;
padding: 0px;
}
#search .selected {
display: block;
}
#search form {
margin: 0px;
padding: 0px;
}
#search input {
height: 30px;
width: 400px;
margin: 0px;
}
#search .button {
font-size: 17px;
font-weight: 600;
color: #002D96;
height: 30px;
width: 110px;
margin-left: 50px;
background: #e6efc2;
opacity: 0.8;
border: #7fb80e 1px solid;
cursor: pointer;
-webkit-border-radius: 2px;
border-radius: 2px;
}
</style>
</head>
<body>
<div id="search" align="center">
<table>
<tr>
<td>
<ul>
<li style="display:block;"><img src="/jscss/demoimg/201208/baidu.jpg"/></li>
<li style="display:none;"><img src="/jscss/demoimg/201208/baidu.jpg"/></li>
<li style="display:none;"><img src="/jscss/demoimg/201208/gg.jpg"/></li>
<li style="display:none;"><img src="/jscss/demoimg/201208/sougou.jpg"/></li>
</ul></td>
<td style="padding-left:10px;">
<form style="display:block" action="http://www.baidu.com/baidu" method="get">
<input name=tn type="hidden" value="baidu"/>
<input type="text" name="word"/>
<input  class="button" type="submit" value="百度一下" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'"/>
</form>
<form style="display:none" action="http://www.google.com/search" method="get">
<input type="text" name="q"/>
<input  class="button" type="submit" value="google搜索" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'"/>
</form>
<form style="display:none" action="http://www.sogou.com/web" target="_blank" name="sogou_queryform">
<input type="text" name="query">
<input  class="button" type="submit" value="sougou搜索" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'"/>
</form></td>
</tr>
</table>
</div>
<script>
            var search = document.getElementById("search");
            var forms = document.getElementsByTagName("form");
            var ul = search.getElementsByTagName("ul")[0];
            var li = ul.getElementsByTagName("li");
            var length = li.length;
            li[0].onclick = function() {
                for (var i = 1; i < length; i++) {
                    li[i].style.display = "block";
                }
            }
            var n = 0;
            for (var i = 1; i < length; i++) {
                li[i].onclick = function(a) {
                    return function() {
                        li[0].innerHTML = this.innerHTML;
                        for (var j = 1; j < length; j++) {
                            li[j].style.display = "none";
                        }
                        forms[n].style.display = "none";
                        forms[a].style.display = "block";
                        n = a;
                    }
                }(i - 1);
                li[i].onmouseover = function(){
                //this.style.border = "#7fb80e 1px solid";
                this.style.background = "#f2eada";
                }
                li[i].onmouseout = function(){
                this.style.border = "0px";
                this.style.background = "inherit";
                }
            }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/youtianxia/p/3857884.html

weixin_30617737

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
360浏览器搜索框下拉选择图片js模拟select效果

最近360浏览器网址导航的主页增加了一个下拉选择图片搜索的功能，也就是用js模拟出了select的效果，今天在单位闲了无事干，就把空上功能给摸索出来了，虽然做的不是太完善，但对要求不高的用户来说，已经可以了，而且也可以为学习Js的朋友提供参考。<html><head><meta http-equiv="content-type" cont...
复制链接

扫一扫