<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>
360浏览器搜索框下拉选择图片js模拟select效果,布布扣,bubuko.com
原文：http://www.cnblogs.com/youtianxia/p/3857884.html