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

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

2
回复
2088
查看
[复制链接]

765

主题

779

帖子

3万

积分

董事

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

积分
33025
发表于 19-5-30 17:43:22 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
如图所示(中国政府网),当没有点击导航条时如图1所示,当点击导航条任意一个内容时,出现对应内容,遮盖下面的原图片区域。具体效果可以参见中国政府网首页。 798615cefa5b09eb4d.png 112565cefa5b7eeb35.png
" Y' U/ A+ O6 Y9 Q8 ]0 U8 n
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    ) A, M* G0 T# U0 u! n

  2. " b$ h9 O1 n1 P
  3. <html xmlns="
    2 t: B+ T9 I4 E

  4.   W  l% x* O6 b% ~0 p
  5. <head>: V5 O$ M1 o% \
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    0 O0 W+ k. J5 Z* G0 v; @3 r
  7. <title>test</title>8 L! B; m/ d% C4 v) [
  8. <style>7 v) S/ X( G! Y
  9. *{margin:0;padding:0;}
    5 ]8 w& h" C0 E3 {7 ^
  10. body{font-size:14px;font-family:"Microsoft YaHei";}
    & _! T5 s5 b+ H3 O2 T( f
  11. ul,li{list-style:none;}$ {2 w% }) m: ]$ ^8 W' @4 I, r, E
  12. " c: a* ~- m& G7 k2 o7 _
  13. #tab{position:relative;}
    0 \5 g" Y4 w& c; L& h
  14. #tab .tabList ul li{8 K7 F5 d+ @7 K6 O' T3 Z
  15. float:left;& [, K9 Z( A. |7 G* y% n3 `: L
  16. background:#fefefe;4 G0 ~9 y5 b/ d+ Q& ?4 e  {
  17. background:-moz-linear-gradient(top, #fefefe, #ededed);
    $ i, o1 ~/ ^& h8 s' X, A1 Y+ R8 f% N
  18. background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));
    : h$ c$ p, {% {4 X
  19. background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));  x* V2 o, n9 [, o
  20. border:1px solid #ccc;
    4 X2 Z; b7 i) L  T! ^7 _
  21. padding:5px 0;5 h" Q; t0 c# j7 ~0 Z
  22. width:100px;
    ( y4 j! s& f3 g9 C( X
  23. text-align:center;. q: I, R0 E' f
  24. margin-left:-1px;( y/ P! ?5 W7 c3 P- o% r) i. X: c
  25. position:relative;
    : q; l+ B4 o5 R  Z2 E4 y: k2 s
  26. cursor:pointer;% H0 F4 q! \. ?7 F. v& y/ V7 \! o
  27. }
    ) D3 C, s/ V& {) g: U5 Z! y
  28. #tab .tabCon{
    8 T6 F4 t) K9 p* M: e
  29. position:absolute;
    " c( @: O  m* J" s2 J' _% r. G& Y
  30. left:-1px;; H' j0 v# R8 R9 Z$ |2 {7 h
  31. top:32px;
    - w; n7 F+ {4 l6 D2 a
  32. border:1px solid #ccc;1 P3 r6 J$ m2 V
  33. border-top:none;
    ! y" O9 m: g; h, `' w
  34. width:403px;- @3 }9 G, x! G+ b
  35. height:100px;4 D1 y9 d3 _- L7 I7 k
  36. }, U- A1 o% K" a* a, Q" u
  37. #tab .tabCon div{! M" {9 N! y" W
  38. padding:10px;9 v1 o) `* u0 w9 r4 ~; t! Q$ D
  39. position:absolute;
    # }& B, |" t7 p
  40. opacity:0;
    % y* ~7 n" I9 p
  41. filter:alpha(opacity=0);# O- L) D& Z9 \' f/ J, p
  42. }
    % @7 V) r, h$ R
  43. #tab .tabList li.cur{
    ! A6 `: g7 _& |0 F8 k  @
  44. border-bottom:none;
    ; ^* Y9 {1 c# ]
  45. background:#fff;6 y4 s. W: P0 k. x& e
  46. }
    5 o+ R  ^. l% t( E% R
  47. #tab .tabCon div.cur{
    1 b. ~1 p& }  [# {5 N
  48. opacity:1;
    ) n- s5 K( J& U8 q1 g9 B
  49. filter:alpha(opacity=100);" M. o( @: r/ e7 I0 x( a2 y
  50. }2 C- e7 J- S6 T
  51. </style>
    7 w7 B4 }6 D! c5 b) E1 S
  52. </head>
    $ d. ?3 Q8 c% M) ]# g, }, C
  53. <body>2 B4 Q- k4 i/ [: z4 G3 k, h
  54. 6 p' w' r5 [& ~1 j) g* {

  55. ; A6 q1 l8 \2 H6 ~. F& f
  56. <div id="tab" style="margin-left:460px;margin-top:20px">8 q' M$ o! V' g6 Y1 R9 E
  57. <div class="tabList">$ k5 I1 p/ P3 t7 }# T5 D
  58. <ul>
    , j* }. N" `8 A" V6 m
  59. <li class="cur">菜单1</li>
    , e8 a& t  r: O9 }  n
  60. <li>菜单2</li>& g6 V: @  @/ m. d! n+ [) ]
  61. <li>菜单3</li>
    / {6 ^4 I7 m$ D! a' P
  62. <li>菜单4</li>
    / g; I' B* ^( B: a' }# g7 m  r( F
  63. </ul>- U1 h  Z) K& \$ i1 x* E: m$ u; H
  64. </div>
    6 @7 V( o& a9 r2 `, u  H/ w" P7 w4 M
  65. <div class="tabCon">& g/ I% D  [- h. u7 ~0 a) g
  66. <div class="cur">内容11111111111111111111111111</div>8 B- y; o9 t- Y, r% _
  67. <div>内容222222222222222222222222222</div>2 h$ {8 q# C0 P5 {- B$ l& |' |& ~5 y
  68. <div>内容33333333333333333333333</div>' `8 y7 }; ~4 O
  69. <div>内容4444444444444444444444444444</div>
    $ G9 i* K1 D. y6 l
  70. </div>  ^7 O: s5 ?+ o8 J" y
  71. </div>0 e$ E' b4 }7 N
  72. : _+ _- y: X2 b& B; Q
  73. <script>( S9 i1 F4 K3 H. b
  74. window.onload = function() {
    8 H- r. R& N* A9 T7 c/ P
  75. var oDiv = document.getElementById("tab");; n1 s* l( _+ u, `+ ^6 d1 T
  76. var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
    1 o' }9 m1 D8 s& Y: e
  77. var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");; Z6 t( F0 N9 w8 H
  78. var timer = null;
    * U9 ?+ |; J! p) F( n
  79. for (var i = 0; i < oLi.length; i++) {3 d3 K" b  z, n, _8 p/ q3 T
  80. oLi[i].index = i;) V! [8 p/ {9 ~& g8 e
  81. oLi[i].onmouseover = function() {3 b2 G6 D5 X. b5 ?
  82. show(this.index);/ L: D+ @* T1 [
  83. }$ n9 U: g# ?: d
  84. }
      J* z! H$ a) U* \2 [; r4 m
  85. function show(a) {) a3 M2 p0 r- |& R, T
  86. index = a;
    $ [$ v+ X. _8 I" b
  87. var alpha = 0;
    " ?: D* I% D: Z7 X3 g, K
  88. for (var j = 0; j < oLi.length; j++) {4 Q4 T. l' c& X5 m0 T' |
  89. oLi[j].className = "";% \2 }% Y8 q: `% p1 V* z$ S. C
  90. aCon[j].className = "";$ A) [) ]# u; g  Z
  91. aCon[j].style.opacity = 0;5 d4 m5 h! `7 O# F7 E# z
  92. aCon[j].style.filter = "alpha(opacity=0)";
    9 x* X' r4 Q9 u' c. G7 ?$ u1 \
  93. }
    7 S5 _6 e3 b2 ^! k+ r
  94. oLi[index].className = "cur";
    2 h; \5 q  U% l/ s
  95. clearInterval(timer);
    7 S) {1 }, q. [+ i+ @) ]" }9 f
  96. timer = setInterval(function() {
    * e6 k+ S; B% [4 z/ z: N! G
  97. alpha += 2;1 X4 U( a8 K+ p' O% |6 p5 t
  98. alpha > 100 && (alpha = 100);
    ! _( t) Y! U7 S
  99. aCon[index].style.opacity = alpha / 100;
    - {0 o- [$ b) B1 K5 d; J
  100. aCon[index].style.filter = "alpha(opacity=" + alpha + ")";  U$ S; p2 \; d* N" x' `  n
  101. alpha == 100 && clearInterval(timer);
    ' Q, }# e) M/ f6 M- ?
  102. },
    $ y: S* a# d  B3 c9 y( U- Q
  103. 5)
      u  B/ Q& D/ I/ W2 C3 F6 a$ U
  104. }! O9 K7 q' |3 S* _$ t; \# d
  105. }4 F6 K5 e; l# \) D  B( B
  106. </script>
    6 y) k% b* S2 g) q7 D# H7 Y, I7 w' b  V

  107. ; h0 V2 b( {; Y( U( D1 B
  108. </body>8 Y$ N: w# X" D) t
  109. </html>
复制代码
9 r. X. C, _  \+ a1 d: B6 W) k
1 P6 z9 S& q7 B1 e* W4 L$ z
254155cefa58fb78a0.png
794275cefa586f02e7.png

0

主题

14

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 20-4-17 12:26:09 | 显示全部楼层         
我是来刷分的,嘿嘿
回复

使用道具 举报

0

主题

8

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 20-5-24 17:10:09 | 显示全部楼层         
我是来刷分的,嘿嘿
回复

使用道具 举报

网站简介

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