开启左侧

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

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

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

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

x
<!--城市切换 -->7 u# x) v; N0 o% H& W/ L" i1 ^, T
<style type="text/css"> 7 m: y2 r, x* h& ~% e4 Q. C# l
#city *{ margin:0;padding:0; z-index:1000000; top:0;left:0px; float:left;}
$ p' H% P  F3 R# q; s  Y" \#warpper{ position: relative; z-index:1000000; margin-top:20px;}
* t6 I( f- o+ C. B5 j" u4 H/ u#city { font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center; z-index:1000000;}" \2 o6 l2 G* P1 G0 O
#city a{ cursor:pointer; color:#666}
/ G; Y1 p" f- J' f9 P; Z#city dl{ height:18px; line-height:18px; padding:0 10px;}# ~* u5 O: X7 X8 x' C+ ^( {6 y
#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;}
  b& t+ _6 t- ?  h; x3 B#city dt.over{ position:relative;padding:0 10px 0px 0px; z-index:1000001;color:#FF3300; font-weight:bold; height:20px; }
0 P( ~$ `$ x1 q  V! l1 e#city li{ float:left; list-style-type:none; margin:0px 5px; width:160px;}
* i2 e" H, n% q( q5 r% P* `1 Z0 e2 S#city #c1 li a{ float:left; list-style-type:none; margin:0px 3px; 0 0 }
! s- Y$ u/ A. O#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;}
+ D4 V8 n" n  R. U; e.block{ display:block;}! I1 F- q; A1 g6 [1 O8 [
.none{ display:none;}0 V9 q$ `6 {$ Z+ z$ V. ]& V) \  b% w
</style>
( }- k2 m+ _4 j: u2 r7 ~0 o( F<script language="javascript">
) }# x" }7 }! Z2 c5 ?function $(str){ return document.getElementById(str);}* z+ b3 t" M9 M  `( P: I+ ~6 u
function $$(str){ return document.getElementsByTagName(str);}
5 N" k1 V8 o" Ivar timer;
- b7 ~7 l/ m  wfunction changeMenu(thisObj,num){' \4 c1 z; ?9 o" A
if(thisObj.className=="over") return false;( ?. I9 P! g2 D! \7 T: M
hids(thisObj);
! _" P% M- F# ^& ^thisObj.className="over";
+ r; x6 f3 C9 v4 n$("c"+(num+1)).className="block";
+ B- g6 v0 [  I9 P) p; \6 e9 r2 @: Z" S+ s/ E5 V
$("c"+(num+1)).onmouseover=function(){clearTimeout(timer);}
( `$ |4 L: a- b8 j3 `1 M# }$("c"+(num+1)).onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},500)}1 |* j  p0 F/ S* h$ ~$ |: g
thisObj.onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},3000)}
, t/ g: c7 ?4 j7 ?" d# y3 @% t; J) _
# j# s! o& g* w, g( y/ n  ~}
, l5 g8 q* o$ w% ofunction hids(thisObj){
8 p3 b+ v- o1 q1 _* C' WclearTimeout(timer);
6 ]5 C4 g/ @' j0 Nvar tabObj=thisObj.parentNode.getAttribute("id");
  v  S, V6 u& P) t0 O* S3 zvar obj_dt=$(tabObj).getElementsByTagName("dt");
, ^+ K0 T+ e- S# Bfor(var i=0;i<obj_dt.length;i++){
+ b2 q& C1 U3 s+ Robj_dt.className="normal";
: K# p, |" u' s# n3 r6 \$ V$("c"+(i+1)).className="none";. L6 M! {: U  X& N  p
}
# {& h; N% [" h  h) h. `5 R/ ?}  D1 l7 ^' J/ Y, _% }
</script>
1 m/ a0 x" L: O3 L) E6 E( Q<div id="city">) a$ V- `. V* Y$ s& J  k+ V
<dl id="warpper">
4 C  G( h$ J; L( v' s! f<dt>[北美主要城市]</dt>4 B# N: Z7 W* q: U
<dd id="c1" class="none">
' ]+ W4 p. e  u* r+ j* W<ul>
  y9 }5 p' R' x2 m/ u2 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>9 {" ?+ S, ~2 D; ]; m
</li>0 t7 G# [0 C( U$ \2 ]( b
</ul>1 W  l) e9 [  g7 h) q
</dd>$ E7 u: s& g8 p. c
</dl>. D# b4 L9 ]' N, e

7 j% @- ^2 s9 S0 R</div>% X1 |# u/ ?0 Q. F) w
<!--城市切换_结束-->
5 }# i7 q% _- |" ?6 n0 x: T% b# l$ I: M5 e
! B; y# [( W8 W- e+ z# m. c


转载请保留当前帖子的链接: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 m* M. h, A, ?看到测试结果了。
, R  \/ Q& G8 g: u
各个城市的地产交易查询,可以上线了吗?

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

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

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

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