开启左侧

[学习借鉴] 测试代码:主要城市切换

[复制链接] 2
回复
1995
查看
打印 上一主题 下一主题
楼主
跳转到指定楼层
发表于 2016-9-15 02:09 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册

x
<!--城市切换 -->
0 u+ D+ F, E1 f7 b5 [* V0 Q0 E+ m<style type="text/css">
) c5 Z  ^* x4 {6 ?' q#city *{ margin:0;padding:0; z-index:1000000; top:0;left:0px; float:left;}
$ W- g; x8 u( E6 U#warpper{ position: relative; z-index:1000000; margin-top:20px;}
3 B& K0 t, @3 C5 x+ q2 T/ j' B#city { font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center; z-index:1000000;}- K  T9 l2 n& _7 T* p) Q
#city a{ cursor:pointer; color:#666}
# T3 q2 b7 e# v9 a; Z3 \5 [#city dl{ height:18px; line-height:18px; padding:0 10px;}( r: y* g. {4 d4 o6 e& ?
#city dt,.normal{ float:left; padding:0 10px 0 0 ; border-right:0px solid #ccc; text-decoration:none; width:auto; cursor:pointer; color:#FF3300; font-weight:bold;}- f* ]+ i; u/ h8 I/ c& t
#city dt.over{ position:relative;padding:0 10px 0px 0px; z-index:1000001;color:#FF3300; font-weight:bold; height:20px; }& |( ^* K. Y3 o8 z9 D( h5 Z
#city li{ float:left; list-style-type:none; margin:0px 5px; width:160px;}5 ^: |& i# v* g6 ^, V) B: J* n  [# [
#city #c1 li a{ float:left; list-style-type:none; margin:0px 3px; 0 0 }
: i- H0 z9 D. w* w& D- }#city dl dd{ position:absolute; width:160px; left:0;top:20px!important; border:1px solid #bbb; background:#fff; filter:progidXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc); padding:3px 0;}* L6 l, o  w. o5 F" k
.block{ display:block;}
; W+ }$ J2 o3 }.none{ display:none;}
% ~0 e- S* K! ]. `& H. u4 ~0 w</style>3 M, u; D! g( k
<script language="javascript">
2 i* N: H5 v) N* m- Ufunction $(str){ return document.getElementById(str);}# ?2 p( j  y$ i" l( z( S0 e; A  A
function $$(str){ return document.getElementsByTagName(str);}
4 c( n/ _5 D' l% N7 gvar timer;
9 x) i/ \/ e2 b( Z* H% ^function changeMenu(thisObj,num){0 e( _4 h2 V) {# h. G' L
if(thisObj.className=="over") return false;3 F2 C, b* e7 H
hids(thisObj);/ y, L, d& w8 T5 g: Y
thisObj.className="over";
8 e) g- l8 ~" s# B- J; b$("c"+(num+1)).className="block";
5 G" f. o) e6 O# W, c0 X% T, K  n0 w
$("c"+(num+1)).onmouseover=function(){clearTimeout(timer);}- g7 T& f. c( f. ?1 h/ P
$("c"+(num+1)).onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},500)}
+ M; _3 t! [2 c7 _1 d! XthisObj.onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},3000)}& ~& c$ `+ h) J+ u# y1 p3 M& \& O

+ h  Y: G  v9 e, ]4 M}( Z6 O: L( Z! w0 S/ X! {5 H
function hids(thisObj){1 o6 P* y  `: {' y* x( k8 ~
clearTimeout(timer);7 F1 [7 \% @0 l' ^. D) g7 B) L- d
var tabObj=thisObj.parentNode.getAttribute("id");
. h2 o* y3 T9 D. j( Gvar obj_dt=$(tabObj).getElementsByTagName("dt");. }; ~: I1 Z  a% h$ O: y) Y- s! i) v7 x4 d
for(var i=0;i<obj_dt.length;i++){
; d) E( h( i( _6 D8 B" xobj_dt.className="normal";$ x) O' j& J4 C3 i. y
$("c"+(i+1)).className="none";5 x# t, e& m5 h- _( }# d
}0 ~9 A" J' R) R3 k" y* [  ?
}) q9 q1 s! |9 V& d! U
</script>/ P. g. k1 A3 V. \* E5 ?- W0 Q
<div id="city">
+ X' S# s* S$ U9 B" i<dl id="warpper">
" y# Q5 L, x# p8 x<dt>[北美主要城市]</dt>
  o6 t2 A  z3 a3 K6 Z7 `. u<dd id="c1" class="none">4 `& V& l9 ?9 Y
<ul>* S2 ?( t' {3 I; g$ \1 D
<li><a href="xxx.html">洛杉矶</a> <a href="xxx.html">尔湾</a> <a href="xxx.html">旧金山</a> <a href="xxx.html">圣地亚哥</a> <a href="xxx.html">圣何塞</a> <a href="xxx.html">西雅图</a> <a href="xxx-1.html">纽约</a> <a href="xxx-1.html">波特兰</a> <a href="xxxx.html">奥兰多</a> <a href="xxxx.html">波士顿</a> <a href="xxxx.html">温哥华</a> <a href="xxxx.html">多伦多</a> <a href="xxxx.html">卡尔加里</a> <a href="xxxx.html">蒙特利尔</a>+ _( N4 T1 \7 v- {9 R
</li>
8 e7 R% |7 W& g. N+ P2 a</ul>* o) n: N# C9 C2 B
</dd>' H2 G2 w8 `( b
</dl>" \) g, G( @; X9 F8 s1 p
5 O$ H2 y" i* z7 k2 k- ?' M
</div>
# B# L* N( \/ B% [<!--城市切换_结束-->5 x/ k6 U8 a5 u& r5 u: b
0 c$ r$ M0 ]8 e. [

! j7 v6 @3 b0 [1 i$ Q# _& Z


转载请保留当前帖子的链接:https://www.beimeilife.com/thread-30675-1-1.html 谢谢
沙发
发表于 2016-9-15 11:45 | 只看该作者
看到测试结果了。
板凳
发表于 2016-9-16 12:14 | 只看该作者
http://beimeilife.duckdns.org/forum.php?mod=redirect&goto=findpost&pid=55897&ptid=30675
8 u9 r$ M- t) `/ |( |/ @看到测试结果了。
1 D8 b3 a0 O) g
各个城市的地产交易查询,可以上线了吗?

使用高级回帖 (可批量传图、插入视频等)快速回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则   Ctrl + Enter 快速发布  

发帖时请遵守我国法律,网站会将有关你发帖内容、时间以及发帖IP地址等记录保留,只要接到合法请求,即会将信息提供给有关政府机构。
快速回复 返回顶部 返回列表