一个仿淘宝的运费地区选择弹出层js效果

现在的位置: 首页＞JavaScript＞正文

上篇下篇

一个仿淘宝的运费地区选择弹出层js效果

2010年09月01日 ⁄ JavaScript ⁄ 评论数 1 ⁄ 被围观 5,325+

这是昨天做的一个仿淘宝的运费地区选择的弹出层JavaScript效果，由于时间关系，我这儿的弹出层用的是固定位置（一般情况下都是用offset附带css的position:absolute来定位）。本实例整体功能就当鼠标移上某位置出现弹出窗口，然后可以点击窗口内地区以供地区选择，点击地区后该地区被选择而取代该位置的地区。还是看实例吧，空说无用。这个实例我也尝试了两种方法，先给大家个方法：

<!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>地区分类</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{ width:60px; height:18px; color:#fff; background-color:#9CC2DA; display:block;} </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].onclick = function(){ g.innerHTML = this.innerHTML ; con.style.display = "none"; } } } function offarea(){ var con = document.getElementById("t_area"); con.style.display = "none"; } //setInterval("showarea()",1000); </script> </head> <body> <div style=" width:60px;margin:0 auto;" onmouseover="showarea()" onmouseout="offarea()"> <div id="t_con" onmouseover="showarea()">四川</div> <div id="t_area"> <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> </div> </body> </html>

提示：你可以先修改部分代码再运行。

上面这个方法在IE6下面有些问题，其他浏览器完美实现，主要思路就是通过对整个区域的选择来避免鼠标移开默认地区时弹出框消失的问题，下面这个实例就相对比较完善，利用了settimeout来控制弹出框的消失，同时也用JavaScript来控制的鼠标移上弹出框地区时的效果。下面是实例：

<!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>地区分类</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>

提示：你可以先修改部分代码再运行。