开启左侧

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

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

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

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

x
<!--城市切换 -->
& C: k: l9 p' c# r% C4 ?) ?% {<style type="text/css">
  S6 T3 ]7 M% g* J9 [7 j6 ^#city *{ margin:0;padding:0; z-index:1000000; top:0;left:0px; float:left;}
+ R9 s  j7 `0 j7 E#warpper{ position: relative; z-index:1000000; margin-top:20px;}
! v- T+ [8 O4 m" g#city { font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center; z-index:1000000;}
' G* X' W% h7 |  W: E#city a{ cursor:pointer; color:#666}
& l3 @7 w. o  e. g; p# I- W# [, p#city dl{ height:18px; line-height:18px; padding:0 10px;}# |8 x) M- f4 ?3 A  Z
#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;}
" ~" W+ Z3 S+ O( `#city dt.over{ position:relative;padding:0 10px 0px 0px; z-index:1000001;color:#FF3300; font-weight:bold; height:20px; }
& ?9 B& U5 w# J" p/ ?/ ^#city li{ float:left; list-style-type:none; margin:0px 5px; width:160px;}
0 Y6 Z2 Y3 `. J) s( J& O' C#city #c1 li a{ float:left; list-style-type:none; margin:0px 3px; 0 0 }2 W3 A8 G( c$ c. L: x# z; r
#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;}
( `9 }- h; q0 x7 u' U, T! j.block{ display:block;}3 u: a; D& @- ?; E: ?
.none{ display:none;}, _5 [* A5 _6 E$ D( T0 Q' v
</style>
. a$ ]0 o7 p$ t' Y) `. v<script language="javascript"> 5 p* M$ z) ?/ i. u
function $(str){ return document.getElementById(str);}
9 j( A6 T* _2 z' Zfunction $$(str){ return document.getElementsByTagName(str);}
3 y3 x' j" Z, ]- |var timer;
# Q- [& p2 t/ pfunction changeMenu(thisObj,num){
3 `1 @% X! N! l5 f# A: U, |if(thisObj.className=="over") return false;' p% D% q& x7 w) ^6 |; e* t
hids(thisObj);; }7 d: s/ K+ n6 p# q* F
thisObj.className="over";
9 |" ~, e. @  f) h: D& U- ~$("c"+(num+1)).className="block";
0 t# v7 y6 p4 P7 q- J* {/ D7 o' X7 `
$("c"+(num+1)).onmouseover=function(){clearTimeout(timer);}
3 y$ {$ p0 U9 I5 a$("c"+(num+1)).onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},500)}6 B! w8 R- h1 h" e' a" q4 b$ u
thisObj.onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},3000)}1 F$ j$ s0 X% E/ P4 h

  R# u* R7 N: e+ a) {9 A- o* a7 [}
! ^% K$ |* O9 n& G: _$ v7 i* H7 _function hids(thisObj){
0 Z" Y9 X: d, D: \' e# rclearTimeout(timer);
  ~$ R( |: J% vvar tabObj=thisObj.parentNode.getAttribute("id");$ Y+ L; ^0 w. S) C
var obj_dt=$(tabObj).getElementsByTagName("dt");" k( m& @+ u* |. S- j* \2 I
for(var i=0;i<obj_dt.length;i++){
; V6 |) Y. M0 \$ }obj_dt.className="normal";
- e5 V7 z6 N! R( a( r  F% h2 h* Z$("c"+(i+1)).className="none";3 {* w: u% i6 ^, c7 U# }; S4 Y: }
}
/ q5 `8 G& _' T, s5 X- h3 y& _* U}' g. V$ G- [' A8 x
</script>
1 V7 c' C) h1 o, T<div id="city">* w1 |# Y( F, [* W8 f8 W4 ]
<dl id="warpper">
( g  }$ N2 F; A- S<dt>[北美主要城市]</dt>6 M; U% F. {, @/ }  A( r! x
<dd id="c1" class="none">6 ^0 q7 h2 j9 B3 N- }
<ul>8 W8 t& Q+ n3 g# A/ n
<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>, ]- m$ Z5 G) Q) }( b# B
</li>
: a, N( m! ?. k0 x</ul>* W/ y1 o) }1 B4 m( L+ p) ~
</dd>
) F8 \* f# x& {3 |</dl>$ q5 h8 T0 R) H
8 P0 z" _5 I2 N$ t" H3 F) ?1 _
</div>+ l! d3 C3 ?. ~5 H+ y
<!--城市切换_结束-->: g+ W& w* m8 y( H; l1 {

8 t& o  |9 N9 o
! |6 T* L  B2 E  V, S+ {* J7 p9 ^( a


转载请保留当前帖子的链接: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=306751 b- e- ~$ I$ k/ X( {9 q
看到测试结果了。

) L6 k* ?. r/ c! M; N各个城市的地产交易查询,可以上线了吗?

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

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

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

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