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

2024-09-05 12:18:27

字体：大中小

来源：转载

供稿：网友

最近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="http://www.aspku.com/jscss/demoimg/201208/baidu.jpg"/></li><li style="display:none;"><img src="http://www.aspku.com/jscss/demoimg/201208/baidu.jpg"/></li><li style="display:none;"><img src="http://www.aspku.com/jscss/demoimg/201208/gg.jpg"/></li><li style="display:none;"><img src="http://www.aspku.com/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>

上一篇：挺个性的jQuery返回底部、返回顶部特效

下一篇：新浪微博自动加关注代码