开启左侧

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

[复制链接]
发表于 2016-9-15 02:09 | 显示全部楼层 |阅读模式

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

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

x
<!--城市切换 -->
6 j2 a+ I% _; P+ o<style type="text/css">
1 B3 N1 e  g- G! R4 t! G4 u* {# n#city *{ margin:0;padding:0; z-index:1000000; top:0;left:0px; float:left;}. t/ @' S4 R+ s$ j
#warpper{ position: relative; z-index:1000000; margin-top:20px;}
  k( L0 g4 `. }#city { font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center; z-index:1000000;}
1 \4 O' V  `' k2 L#city a{ cursor:pointer; color:#666}6 ]  i2 p* K3 j+ p* L. I# ^
#city dl{ height:18px; line-height:18px; padding:0 10px;}
2 y% D/ i2 d/ c#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;}
- }: S: Z2 y/ U! V; H6 F#city dt.over{ position:relative;padding:0 10px 0px 0px; z-index:1000001;color:#FF3300; font-weight:bold; height:20px; }. h2 ?# n& j6 U. d/ @
#city li{ float:left; list-style-type:none; margin:0px 5px; width:160px;}9 j$ e  D" v% A, a) y1 d1 q% b
#city #c1 li a{ float:left; list-style-type:none; margin:0px 3px; 0 0 }
! ~6 W( E( Y9 X0 x. M5 N/ 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;}
7 |% O- S0 u7 n2 i% M& g. B.block{ display:block;}
6 T% ^% }6 v. O$ [4 ]* l5 }' j.none{ display:none;}
5 O" G1 C! j6 P# p! n' }6 y% `</style>
/ B6 w5 P6 C  [9 A2 z9 N; S7 s9 A$ c<script language="javascript"> ! F7 i' g$ I7 [( i7 a& c; j: s1 }
function $(str){ return document.getElementById(str);}
  y: N! a( n: W" z! J, Y  W/ g' e5 Ifunction $$(str){ return document.getElementsByTagName(str);}
9 Z, [+ ~6 F5 X4 fvar timer;5 Y7 T: i: y# f& k! x
function changeMenu(thisObj,num){9 f/ r! p/ _* p# P4 Y) L
if(thisObj.className=="over") return false;+ N: y1 `2 J+ }6 H
hids(thisObj);( X5 @; f. z/ @& k1 s  U, L
thisObj.className="over";
+ W# i% p' }; W/ T  Y! R$("c"+(num+1)).className="block";
+ V8 D" j. |$ i' K7 L; s( W: M' M6 I- y
$("c"+(num+1)).onmouseover=function(){clearTimeout(timer);}  E3 c: z/ S; k4 Z% c$ j* E( J: |
$("c"+(num+1)).onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},500)}" h7 p: ~' U- _& H/ ]
thisObj.onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},3000)}9 \- L2 q! K% G2 l! E

; q2 o$ C+ F) ^5 A& r}; ]! N6 _& Q/ O2 Y% {
function hids(thisObj){; g1 O* F8 g) L! ~) p% q
clearTimeout(timer);
" g8 g- T9 }: A5 u4 ?" L6 ^var tabObj=thisObj.parentNode.getAttribute("id");
" f8 W! G3 ~( E1 W+ H/ d1 s8 ivar obj_dt=$(tabObj).getElementsByTagName("dt");
9 `* g2 G0 j0 U) ~( z0 }, Z; a8 dfor(var i=0;i<obj_dt.length;i++){/ z0 A6 j; e4 \, G/ M6 v
obj_dt.className="normal";
7 Q0 c3 t, F. v$("c"+(i+1)).className="none";
2 q+ B; ~- z( z3 b) T}. {7 \& `* h# A/ m2 u+ N1 |: H' I* n
}2 L' l/ Q$ q; V
</script>8 N# R: b% h. s' T. r- Z4 B
<div id="city">; R# ~$ ?7 [3 D0 E
<dl id="warpper">! A( D2 G; i7 @" v' O+ p& U
<dt>[北美主要城市]</dt>
; @2 o; H+ |2 H% ?8 D' `) _# D<dd id="c1" class="none">, t4 @# e  I! L; B$ k* l9 D
<ul>
7 h2 c  V. g" i$ ?2 ~4 O2 i<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>
2 h0 C6 G1 w- S2 N# g8 e, j</li>
9 ^: h3 [* A6 m9 \</ul>
# J7 p8 B0 C, X+ m$ j: k/ d</dd>
" F2 c+ T  a! _. G+ s& Z/ V</dl>
6 J' R: a( W* }6 c
* ~, |0 X5 O* f: r" E' p4 f( T</div>8 E9 M" T  [! W5 T
<!--城市切换_结束-->& `: W# v6 E+ t/ a/ s

+ [. R$ d7 |2 Q) F) G- K8 \7 ]* q( g6 k4 E# Z4 o0 T


转载请保留当前帖子的链接:https://www.beimeilife.com/thread-30675-1-1.html 谢谢
发表于 2016-9-15 11:45 | 显示全部楼层
看到测试结果了。

点评

各个城市的地产交易查询,可以上线了吗?  详情 回复 发表于 2016-9-16 12:14
发表于 2016-9-16 12:14 | 显示全部楼层
http://www.beimeilife.com/forum.php?mod=redirect&goto=findpost&pid=55897&ptid=30675. u& G- e% g, N5 \1 l/ O0 Z) k
看到测试结果了。

4 Q( Q6 D8 S7 |5 K& _各个城市的地产交易查询,可以上线了吗?

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

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

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

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