首页 > 代码库 > 360浏览器搜索框下拉选择图片js模拟select效果
360浏览器搜索框下拉选择图片js模拟select效果
- 最近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="百度一下" onm ouseOver="this.style.opacity=‘1‘" onm ouseOut="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搜索" onm ouseOver="this.style.opacity=‘1‘" onm ouseOut="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搜索" onm ouseOver="this.style.opacity=‘1‘" onm ouseOut="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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。