开启左侧

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

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

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

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

x
<!--城市切换 -->
. `9 m5 Y+ t6 M5 W, t7 L& z' B<style type="text/css">
1 a0 O; v. q% R; n2 v; \# x#city *{ margin:0;padding:0; z-index:1000000; top:0;left:0px; float:left;}
/ }/ Y" H, ]- I4 Y7 S#warpper{ position: relative; z-index:1000000; margin-top:20px;}( v% y4 j( F( r( b( m/ |6 q
#city { font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center; z-index:1000000;}
# ^. H7 v0 P+ B3 G: `8 G#city a{ cursor:pointer; color:#666}4 b; l$ r6 R' z  D' M
#city dl{ height:18px; line-height:18px; padding:0 10px;}' K* T5 t( d+ i  h7 }
#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;}, ]* g3 G6 z) o6 c" p* Q& [4 @
#city dt.over{ position:relative;padding:0 10px 0px 0px; z-index:1000001;color:#FF3300; font-weight:bold; height:20px; }
- U  @% f- Y0 u& T#city li{ float:left; list-style-type:none; margin:0px 5px; width:160px;}
: c9 n1 c* n; Z/ \! M#city #c1 li a{ float:left; list-style-type:none; margin:0px 3px; 0 0 }
6 w7 e/ k) f' _7 Y+ t; w#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;}% r0 o' W9 e- w4 x4 O1 t9 m/ j
.block{ display:block;}
/ N  S  t7 u/ @) \& U+ a6 ~* P.none{ display:none;}5 B- w% I2 ~. @' o9 h# P0 N
</style>
8 d4 ^6 F' _4 }$ w<script language="javascript"> # T0 n# M- Q! Z. `! t4 a! [9 w
function $(str){ return document.getElementById(str);}% v& b' s) A% D$ \2 S
function $$(str){ return document.getElementsByTagName(str);}
( k' u" W- X5 s1 Hvar timer;
- Y$ D" E+ G: H+ Xfunction changeMenu(thisObj,num){: V* I" x. A" W
if(thisObj.className=="over") return false;+ J+ @/ g& s( C& U, `' j7 d
hids(thisObj);
( _2 N( U2 |- l0 @thisObj.className="over";
, b8 e) R# t9 _! W# ^, _5 v$("c"+(num+1)).className="block";6 E  t, c4 W% j9 f0 J. s7 W) I

( A4 s: f( G, h! h9 r$("c"+(num+1)).onmouseover=function(){clearTimeout(timer);}
0 K0 ^% H8 o+ Y' y8 v$("c"+(num+1)).onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},500)}
3 a  |- D$ k* s* k5 D# E. ~9 \thisObj.onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},3000)}
. y7 ~6 `% ?+ F5 T1 G+ |( U4 s8 x% W( u0 @
}% S1 p; o, m$ v( k0 y1 ^9 Y" x2 M
function hids(thisObj){
/ P3 N9 d. W) p1 \" uclearTimeout(timer);
+ ?0 o) d0 M! ?$ j6 P3 fvar tabObj=thisObj.parentNode.getAttribute("id");
2 ]7 J+ ^% D& V8 m+ mvar obj_dt=$(tabObj).getElementsByTagName("dt");. W% D+ l% c1 [. Z! R7 R9 X
for(var i=0;i<obj_dt.length;i++){
9 t8 o( t: j2 |6 _# Z" Eobj_dt.className="normal";# V8 M3 u: g, x( Q
$("c"+(i+1)).className="none";- o& b. E  m' \( Z3 Z7 b
}
/ w) A# K- U; \}+ b5 r6 v" J4 T, m" Q
</script>
6 i- e3 N0 H/ O<div id="city">/ B' D& B% c6 a( f) _
<dl id="warpper">
$ i7 G; W* k* i( U/ F9 F* h<dt>[北美主要城市]</dt>) X9 Z) o8 [1 B- n, }8 w* T
<dd id="c1" class="none">
' m; i$ f6 m, l$ g7 ^8 u0 B& m8 r<ul>. z. W5 H5 d8 `7 {, M, H! k
<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>
+ p; m6 D5 Z) r& p: K: i" K</li>
; P- [+ Z% `8 Z</ul>1 R. l# w! M7 N- ^. S. n8 \
</dd>
# I7 `6 I; c7 |. W% f5 a" `</dl>
' W0 Q( l/ L  T8 q$ L  p
# t" x1 F- j  B. h6 v9 I</div>1 V2 f# Z" P$ R* N& m
<!--城市切换_结束-->: {4 @% M# R1 V3 L

" g* ^! \$ `( F1 T
( ]* v4 q3 ]8 B


转载请保留当前帖子的链接: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: Q2 F, a0 `# _; [, Q. K) F% W
看到测试结果了。
1 D+ I5 \* t0 j$ ]3 [4 s
各个城市的地产交易查询,可以上线了吗?

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

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

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

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