开启左侧

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

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

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

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

x
<!--城市切换 -->
/ ^$ x+ n! A0 M/ l) P2 M% N9 m1 D<style type="text/css">
$ _2 e9 H/ C8 |) J" J#city *{ margin:0;padding:0; z-index:1000000; top:0;left:0px; float:left;}
' D* D; K6 n3 O9 ^#warpper{ position: relative; z-index:1000000; margin-top:20px;}
9 S6 w) l( `9 p" Z% n1 ^5 S0 T3 d$ o#city { font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center; z-index:1000000;}3 D# x# z6 {3 m( \3 ^* V
#city a{ cursor:pointer; color:#666}" V5 Z# b% ^, K5 R# X
#city dl{ height:18px; line-height:18px; padding:0 10px;}
; S" [! D# T- ^1 j#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;}
* c. y+ g+ N) c1 i# ?2 |5 {#city dt.over{ position:relative;padding:0 10px 0px 0px; z-index:1000001;color:#FF3300; font-weight:bold; height:20px; }
# F0 s' E( v: S* X* b#city li{ float:left; list-style-type:none; margin:0px 5px; width:160px;}: W3 l1 E6 U+ v/ s) u
#city #c1 li a{ float:left; list-style-type:none; margin:0px 3px; 0 0 }
. {( g9 f9 [/ e; |) ?2 {% C7 A; B#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;}
+ R( W  D5 T4 G/ J: \) S% {.block{ display:block;}
$ `+ `2 Y9 N7 y0 w) z# N7 A.none{ display:none;}
' R$ H; g/ Y- x6 {. K; w7 f- d</style>
' z: T/ q9 v8 \  U, @<script language="javascript">
% D* R$ |$ k6 |2 s8 dfunction $(str){ return document.getElementById(str);}9 W  }' a  a. z! |4 W* G
function $$(str){ return document.getElementsByTagName(str);}8 J" z! D+ ]. Y1 n: v
var timer;
$ V  r0 t0 c- M8 R8 @% p$ x$ O1 Afunction changeMenu(thisObj,num){
/ _5 b: M3 U) [" O8 c) [# q7 Vif(thisObj.className=="over") return false;( \5 {4 F% D2 J9 `" d
hids(thisObj);; P( z" m: l- ^. ]$ z9 @* `
thisObj.className="over";
* K: ?5 `) G( |+ h3 \$("c"+(num+1)).className="block";5 c! z5 M& j. Q0 J0 V" @8 ^% j: E+ I

7 E# {7 O: k9 E& b4 |; w9 d2 ?$("c"+(num+1)).onmouseover=function(){clearTimeout(timer);}' }* g: F2 b5 @' |5 r/ d
$("c"+(num+1)).onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},500)}
& p5 s5 S+ a; `; S1 \8 pthisObj.onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},3000)}2 t3 d7 u  Q- L# |
* H- Q. W# ?7 J+ E: S
}1 `0 L  m5 C( S, o8 r. @- k# w7 ~
function hids(thisObj){. o) x8 m, R2 s- J2 L
clearTimeout(timer);0 M6 x; l% N6 `* e. Y$ p( |1 A
var tabObj=thisObj.parentNode.getAttribute("id");0 t& g: p3 {3 H! f
var obj_dt=$(tabObj).getElementsByTagName("dt");
) Y( B5 R- n* hfor(var i=0;i<obj_dt.length;i++){
7 l8 b+ b, ?" x$ Mobj_dt.className="normal";
4 n' n2 @4 x* q; a( r- E. n& a$("c"+(i+1)).className="none";
7 u* \9 _2 Q. q/ j}" x9 q2 ?" d& `3 G* Q" Y
}
/ L* q' e% ^; f</script>
) k  m  o: k/ O" B" o<div id="city">
# R+ G, G1 ~9 \/ b& n<dl id="warpper">
& Y, k$ A. Y+ q1 N<dt>[北美主要城市]</dt>+ |: \: t1 z3 H0 F  b' {# r
<dd id="c1" class="none">
  t) I" F! h5 ^& Y. s- J0 P<ul>
/ R4 ]+ _% r6 n. b  {) l! @0 A  Z<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>+ Q6 S9 Z$ |/ L, d6 R9 r4 o
</li>
8 `6 T/ t* \5 q7 q( Y; _% V3 L</ul>
& b! M0 z% q/ o: Q. t</dd>4 }$ Z) ~; Y, F' Z. b4 S) g
</dl>! R0 k4 i; r  @' Z5 \

4 r, m  Z2 p$ n, v: Q$ q2 a  U</div>
: ]0 g. W* q4 D<!--城市切换_结束-->& b' F7 g' ~" W- e1 u( X

" }9 O4 V# d  `
9 o. ~7 h4 e7 h, E3 p* k+ h6 u7 R9 F


转载请保留当前帖子的链接: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
% x$ e# G4 u" R7 \( Z' ?看到测试结果了。

. P, E/ ~7 ?2 r各个城市的地产交易查询,可以上线了吗?

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

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

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

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