javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:IT技术 > WEB前端 > JavaScript >

javascript地区分类选择特效

来源:IT技术网编辑:素还真发布于:2013-09-03人围观JavaScript特效地区分类

javascript地区分类选择特效,该效果是仿照淘宝地区分类做的,具体效果请看demo,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<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="http://www.ablanxue.com">全部</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>


JavaScript,特效,地区,相关的文章
有时间的话来看看IT界的突发事件