开启左侧

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

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

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

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

x
<!--城市切换 -->
1 |/ k  B& m9 |4 F, z<style type="text/css">
: ?) d# o% A/ n+ B7 P#city *{ margin:0;padding:0; z-index:1000000; top:0;left:0px; float:left;}
7 |! |+ t; j- M- f7 m* w, e+ p#warpper{ position: relative; z-index:1000000; margin-top:20px;}# U; ~  M/ v! H% B+ f, ]# p; X9 F
#city { font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center; z-index:1000000;}
0 x3 @( [) x& i0 a& n. o) i( w2 c: u6 K#city a{ cursor:pointer; color:#666}( y1 Y& N; f5 n9 v7 y
#city dl{ height:18px; line-height:18px; padding:0 10px;}
( J4 ]/ ~$ C0 W6 X/ @! j4 t8 D#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;}
: \4 Q/ {; I, I! q! Y# }#city dt.over{ position:relative;padding:0 10px 0px 0px; z-index:1000001;color:#FF3300; font-weight:bold; height:20px; }
( o% i% _" b- p#city li{ float:left; list-style-type:none; margin:0px 5px; width:160px;}8 u$ A% a7 ~4 r9 f& w7 U
#city #c1 li a{ float:left; list-style-type:none; margin:0px 3px; 0 0 }* C/ C" x( {- G- \2 I5 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;}2 _: p* ?/ E  c! m1 m' I3 q2 v: h
.block{ display:block;}; b6 t8 K) e& Y! N4 i
.none{ display:none;}) D6 g& L6 a1 h# {+ \2 H
</style>2 o! t( m5 l: d" D! D
<script language="javascript"> 4 }& G+ f# Y+ l  Q
function $(str){ return document.getElementById(str);}) ?( ]+ n5 o; q! E5 g8 _$ E8 B" G
function $$(str){ return document.getElementsByTagName(str);}$ x7 k$ I% `& o$ k8 d% ~
var timer;
8 z5 U3 Z: ~: N# K$ W/ ^function changeMenu(thisObj,num){5 |8 K  X5 N% `' B. X% w  E
if(thisObj.className=="over") return false;1 ~: W! G6 S" |8 m# S% R- Q
hids(thisObj);
+ N  f4 H3 h" [* G  O% m& WthisObj.className="over";
, }% L9 a  d, e" o2 {6 s: E+ m7 I& D$("c"+(num+1)).className="block";
  @6 y* L, Y  w3 \" ?" Z1 i( o6 O( ^2 b( }" ]
$("c"+(num+1)).onmouseover=function(){clearTimeout(timer);}! ?3 x6 O- {: ?3 f$ a5 ?( x9 b
$("c"+(num+1)).onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},500)}+ y5 S: S( P* s
thisObj.onmouseout=function(){timer=setTimeout(function(){hids(thisObj);},3000)}
; ~: ~& D* x9 i  z* k6 t( O3 Q- g
}( G5 ^/ S; h1 l& f: F% a
function hids(thisObj){
7 ?2 `; t/ ]# K, XclearTimeout(timer);
! Q" J; W+ i8 r7 j# h- a7 Kvar tabObj=thisObj.parentNode.getAttribute("id");
! x) N* q# h" Lvar obj_dt=$(tabObj).getElementsByTagName("dt");
% S: j; U/ z0 [2 C1 g. Dfor(var i=0;i<obj_dt.length;i++){
( |; U- O9 a2 Pobj_dt.className="normal";
# W5 L7 ]/ w" a  ]% S! c$("c"+(i+1)).className="none";  [; @  T! b2 j: y
}1 r# {! l( b& `$ i5 q
}1 Z, E9 J+ Q5 \9 \1 x# L6 b
</script>8 b+ s: q( p5 i  i6 Y
<div id="city">
& Z! _. a2 {- k2 M% x) i. a<dl id="warpper">
0 A( W: ?$ b" M6 b5 x* b( U3 d<dt>[北美主要城市]</dt>
$ T3 y' Z* e" h: L1 {. w5 g<dd id="c1" class="none">
( Q' n0 L; W8 K<ul>2 B) b/ V- t5 F2 V
<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>0 C$ [8 f* b  ^+ y$ n
</li>
/ W; }% S. O# k</ul>, {% s# ^: ^* X# z4 s
</dd>6 a' C, f; a! K( u3 D
</dl>2 S1 Y" x, A. E3 [) R1 i2 Q! i1 P

1 @) u: K: p" z+ Q* C0 _# u9 n# U</div>' F, N7 d$ R( q2 _8 E
<!--城市切换_结束-->
( L1 k4 W6 W2 [6 w5 w& f: w! \3 W& `0 c% q6 j

" x) ~2 X2 A' Y/ \


转载请保留当前帖子的链接: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
* p* f8 I; b/ Y" P看到测试结果了。

1 u" a' P; y- a: N各个城市的地产交易查询,可以上线了吗?

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

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

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

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