腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

[其他] 如何实现当鼠标悬停在导航条时下方区域显示对应内容

0
回复
1603
查看
[复制链接]

761

主题

775

帖子

3万

积分

董事

Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72

积分
32849
发表于 19-5-30 17:43:22 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
如图所示(中国政府网),当没有点击导航条时如图1所示,当点击导航条任意一个内容时,出现对应内容,遮盖下面的原图片区域。具体效果可以参见中国政府网首页。 798615cefa5b09eb4d.png 112565cefa5b7eeb35.png
' `+ m  D4 N/ F' i/ W+ o( Z( T
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "( `. p4 B, e! t2 v% F- o
  2. 2 k( a, Z+ {4 W: {0 ?7 |+ x4 j) v
  3. <html xmlns="
    6 d: W8 O1 U1 Z) }* `+ |. l

  4. 6 U/ L, s+ r5 G) X
  5. <head>- k. ]; f8 r/ v4 c4 P. P' ]: K% {% }
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />, `" k/ G7 H" J; Z  G/ I7 j6 }
  7. <title>test</title>
    3 Z9 G  }# m1 {7 ~1 `) q' Y
  8. <style>: x" e! q# [$ ~; V4 }0 u! p0 N
  9. *{margin:0;padding:0;}
      g5 R$ [4 N8 w. {
  10. body{font-size:14px;font-family:"Microsoft YaHei";}
    1 G( _/ U$ t- U2 n; g
  11. ul,li{list-style:none;}
    1 f' e) |8 W+ _7 [
  12.   t7 ^, s7 D. w; m( i4 P! ^; e
  13. #tab{position:relative;}
    % \" ]$ u3 R0 N% o1 r
  14. #tab .tabList ul li{) i' @+ J& Q- o" V* Z& {9 J8 k
  15. float:left;
    % C% y9 U1 b2 M
  16. background:#fefefe;
    4 S5 O# G" b( V6 h. @2 O7 W5 P
  17. background:-moz-linear-gradient(top, #fefefe, #ededed);
    2 ?% m: r9 T- `8 Z/ j. ?6 ]
  18. background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));
    $ p& _5 N# S, M) S: c0 r; p
  19. background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));& ]. N7 l: {' I
  20. border:1px solid #ccc;
      o6 A+ g! \8 M4 ~# s4 c* Z
  21. padding:5px 0;+ ?2 T8 B0 S& F( }( p" f8 m7 g2 W
  22. width:100px;- [5 \, c- |- y  Y% J3 ?7 b
  23. text-align:center;: G7 c/ C/ H6 v9 O5 y
  24. margin-left:-1px;
    % U$ _8 x  L3 W+ i: _
  25. position:relative;
    , R5 u+ f4 T# [( b
  26. cursor:pointer;
    3 W9 c  P: w5 z0 u+ K/ O
  27. }' {' V; N; F7 R* P# O5 Y
  28. #tab .tabCon{
    1 _( k6 X9 V2 A, m4 E+ U
  29. position:absolute;0 @$ I. r! J2 [; s2 T6 V
  30. left:-1px;/ G) `0 M2 ^! E% n; X) h! X
  31. top:32px;
    . Z' ~, M. G* b9 a9 ?8 i! L
  32. border:1px solid #ccc;" G0 }6 h, i5 S  n& S
  33. border-top:none;# |$ @5 ^: j# r& Q5 B" v
  34. width:403px;
    * D( D, o& v% Q' r/ `6 N
  35. height:100px;
    ( K& x9 ~& n8 G$ L0 ^; p: t
  36. }
    2 T6 |* J, o+ u) |8 I
  37. #tab .tabCon div{
    4 o) G: T* X1 `" X$ E# V9 t+ s
  38. padding:10px;* M, P9 q: e8 n: W+ m4 c7 K
  39. position:absolute;
    + Z3 S' q" H% B/ x+ N5 ^/ V
  40. opacity:0;
    ( W# r3 \, |) ]  x! B. D' [* f
  41. filter:alpha(opacity=0);. V7 e3 ?) ~  \, y8 M$ X  y9 k! n
  42. }9 x; m( l) X" H, b7 K
  43. #tab .tabList li.cur{& T0 m6 D  K* k, }6 _; k3 |
  44. border-bottom:none;5 l1 v$ c2 U8 Y) s7 r4 w
  45. background:#fff;/ m! d3 \1 L+ b" F
  46. }. P6 v" c0 m+ ]/ z
  47. #tab .tabCon div.cur{
    * A# A" q' |; {, Q
  48. opacity:1;
    2 }7 e. D! T3 u2 [. v# l. P) w
  49. filter:alpha(opacity=100);
    2 M! E* x+ U9 Q% d: L
  50. }
    2 t. J. y- B1 s+ O
  51. </style>4 i- v3 U; F9 y8 V0 J
  52. </head>
    9 R: p4 }3 Q& F! g, [5 _# Z
  53. <body>' ]. D/ Z  G) [) F  F
  54. % j+ Y+ l* G$ e( J' K6 O

  55. $ A  |5 b9 h. _! ]
  56. <div id="tab" style="margin-left:460px;margin-top:20px">% G0 M2 `) O( |7 \; E' Z
  57. <div class="tabList">
    8 [0 t) c0 b: V& ?
  58. <ul>
    / K8 {. j$ K7 y0 E; m* d
  59. <li class="cur">菜单1</li>& R- i2 n8 `* A- K  E
  60. <li>菜单2</li>
    6 ?) ?6 N, ^$ z1 B: t/ p7 Q
  61. <li>菜单3</li>
      ^- w& ]  T5 ^' M: k6 Q# A
  62. <li>菜单4</li>& l# D6 I) z4 X' J& ^
  63. </ul>
    9 v$ O4 S; H# Z! W0 ~
  64. </div>6 j5 Y6 B6 n/ Q$ z% X  u
  65. <div class="tabCon">2 W' L. t' a4 Z: m+ F9 o# k
  66. <div class="cur">内容11111111111111111111111111</div>
    9 H4 v2 ]4 C, [3 u  U
  67. <div>内容222222222222222222222222222</div>
    5 Z5 `7 J( w. g' O9 O+ W; [
  68. <div>内容33333333333333333333333</div>
    / B& I" t) _; @$ b" O1 M6 i4 K) l! g
  69. <div>内容4444444444444444444444444444</div>
    9 p' U+ u4 l3 b- Q* K2 J
  70. </div>
    2 {. U- G" r# f& a& \% d: }5 A8 f
  71. </div>
    # u* w/ Y: f  k

  72. 7 f) u$ U& `1 o2 w* U6 c  b9 E& A
  73. <script>
    8 @# \+ }8 f' t# m
  74. window.onload = function() {
    8 `, @8 a# N( W2 R0 T5 c6 Z3 t
  75. var oDiv = document.getElementById("tab");
    % `% l0 P, O! V0 Y
  76. var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");( x. K8 o6 T2 M: l* I$ c: a
  77. var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");
    0 ?  z( C/ ?, D- b+ Y( l; Q3 a
  78. var timer = null;: ~2 J, q' m% e, ^6 w) [- p6 p
  79. for (var i = 0; i < oLi.length; i++) {8 A( z7 C4 p) i7 q* ~
  80. oLi[i].index = i;
    2 ]1 j6 D: ~: p  v
  81. oLi[i].onmouseover = function() {
    ( r0 T" h- D  {5 P6 b; k3 y6 P
  82. show(this.index);
    3 V: [8 w6 k, z& o% W9 r
  83. }
    : s# u+ j  Y8 b2 H3 e# v0 [5 [1 K
  84. }
    * B! a9 r3 B, W* @% I) a5 |! e! `
  85. function show(a) {5 L( G0 ?8 Y0 ~, N3 T3 F1 G
  86. index = a;
    8 {, ~! A7 J2 [1 Q: R1 B# p# {
  87. var alpha = 0;4 u* g8 ^8 A" O1 _4 C0 H3 R; R
  88. for (var j = 0; j < oLi.length; j++) {1 X, R, e0 M: j1 _% d8 j
  89. oLi[j].className = "";
    5 Q9 y' i3 d# S# G
  90. aCon[j].className = "";
    ) G0 j; f, Z: r) x6 @& X' J
  91. aCon[j].style.opacity = 0;
    5 O4 Z7 i+ H7 Z: c* m$ C! Z' n, |
  92. aCon[j].style.filter = "alpha(opacity=0)";; D1 \# `3 T1 l
  93. }( `, M9 X  C+ j& l7 P: [% X% j2 q4 C. e
  94. oLi[index].className = "cur";' Y6 n1 _' r* a1 {$ l/ s2 d6 {
  95. clearInterval(timer);; u. _1 L8 C' t- y, s4 X
  96. timer = setInterval(function() {& _, N0 m9 |& x: x
  97. alpha += 2;4 `8 l7 V/ w* b( z  n
  98. alpha > 100 && (alpha = 100);% Z8 x% }# o4 k! t& y
  99. aCon[index].style.opacity = alpha / 100;
    " c. j% J5 k# }% W2 T
  100. aCon[index].style.filter = "alpha(opacity=" + alpha + ")";! J; H( E/ [' z; }" |
  101. alpha == 100 && clearInterval(timer);
    & d/ j' |' S) C, V9 |# {# a
  102. },4 ?$ a* v$ B- L, X, Y! ?- U
  103. 5)
    7 w6 Y4 M6 {5 o! x
  104. }
    8 l& X! }3 w- R- E* X2 i4 ]: T5 |
  105. }
    - d+ `, {. g# S/ @, `* Q
  106. </script>
    % ^2 J; `8 X/ b5 g9 E

  107. . f4 n  L% W/ P8 L3 r, I
  108. </body>( _# a6 E3 Z) t2 D4 o; w- q/ V
  109. </html>
复制代码
6 G; M( \2 {# i# P# h$ j

2 Y9 U$ \) x) G7 o% p+ B
254155cefa58fb78a0.png
794275cefa586f02e7.png
网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除