| 标题 | javascript地区分类选择特效 |
| 范文 | javascript地区分类选择特效,该效果是仿照淘宝地区分类做的，具体效果请看demo，代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js城市选择</title> <style type="text/css"> *{ padding:0; margin:0; list-style-type:none;} body{font-family: "宋体";font-size: 12px;} #t_con{ width:60px; line-height:20px; color:#00F; cursor:pointer; margin:20px auto 0 auto; border:1px #09C dashed; text-align:center;} #t_area{ width:268px; overflow:hidden; border:2px #09C solid; background-color:#F1F9FC; margin:10px auto; padding-bottom:10px;display:none; } #t_area ul{ margin:10px 0;} #t_area li{ width:60px; height:18px; float:left; display:inline; text-align:center; line-height:18px; margin:4px auto auto 5px; } #t_area li a{ color:#00F; text-decoration:none;} #t_area li a:hover,a:active{ color:#fff; text-decoration:underline;} </style> <script type="text/javascript"> function showarea(){ var con = document.getElementById("t_area"); var arealist = con.getElementsByTagName("li"); var g = document.getElementById("t_con") con.style.display = "block"; for (var i=0;i<arealist.length;i++){ arealist[i].onmouseover = function(){this.style.backgroundColor = "#9CC2DA"} arealist[i].onmouseout = function(){this.style.backgroundColor = "#F1F9FC"} arealist[i].onclick = function(){ g.innerHTML = this.innerHTML ; con.style.display = "none"; } } } function offarea(){ var con = document.getElementById("t_area"); con.style.display = "none"; } var timer; </script> </head> <body> <div id="t_con" onmouseover="showarea();clearTimeout(timer)" onmouseout="timer=setTimeout('offarea()',200);">四川</div> <div id="t_area" onmouseover="showarea()" onmouseout="offarea();clearTimeout(timer)"> <ul> <li><a href="">全部</a></li> <li><a href="#">四川</a></li> <li><a href="#">北京</a></li> <li><a href="#">天津</a></li> <li><a href="#">河北</a></li> <li><a href="#">黑龙江</a></li> <li><a href="#">上海</a></li> <li><a href="#">北京</a></li> <li><a href="#">天津</a></li> <li><a href="#">河北</a></li> <li><a href="#">黑龙江</a></li> <li><a href="#">上海</a></li> <li><a href="#">北京</a></li> <li><a href="#">天津</a></li> <li><a href="#">河北</a></li> <li><a href="#">黑龙江</a></li> <li><a href="#">上海</a></li> <li><a href="#">北京</a></li> <li><a href="#">天津</a></li> <li><a href="#">河北</a></li> <li><a href="#">黑龙江</a></li> <li><a href="#">上海</a></li> <li><a href="#">北京</a></li> <li><a href="#">天津</a></li> <li><a href="#">河北</a></li> <li><a href="#">黑龙江</a></li> <li><a href="#">上海</a></li> <li><a href="#">北京</a></li> <li><a href="#">天津</a></li> <li><a href="#">河北</a></li> <li><a href="#">黑龙江</a></li> <li><a href="#">上海</a></li> <li><a href="#">北京</a></li> <li><a href="#">天津</a></li> <li><a href="#">河北</a></li> <li><a href="#">黑龙江</a></li> </ul> </div> </body> </html> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。