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

[其他] 一个JS导航鼠标悬停切换效果

3
回复
3060
查看
[复制链接]

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 18:06:54 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果完整代码:" W- m  s5 j: S3 O! w# P/ r1 Q
  1. <!doctype html>& X  q# l6 U$ Y6 t: T; u1 k
  2. <html>
    & F+ [9 r+ r8 l  \: T
  3. <head>
    7 @4 Q8 M6 G# f) e( G; e9 U1 H
  4. <style>1 t, W9 b; P' i0 q7 w
  5. *{padding:0; margin:0;border:0}: @4 a3 C# W& D
  6. li{list-style:none}
      m2 S, r  r# J- o0 K
  7. 6 Q" F# u' i: o+ {) a' p
  8. 1 T$ B6 z2 K( C8 M4 Q8 y, f0 Q0 W
  9. .Classify{width:1200px;margin:0 auto}
    7 ]3 C' C' n- I1 ]0 o$ J& a
  10. .ClassifyH{width:100%;height:50px;position:relative;font:24px/50px 'microsoft yahei';border-bottom:2px solid #eee}! C: H  t, w* w& D8 c, y+ s( M
  11. .ClassifyNav{position:absolute;bottom:0;right:0;height:40px;font:16px/40px 'microsoft yahei'}' [# |6 u; J+ b. L: s
  12. .ClassifyNav>li{float:left;margin-left:10px;cursor:pointer}7 o: z+ \& M6 e* M& ?# E
  13. .ClassifyNav>.active:after{content:"";display:block;width:100%;height:2px;background:#f3006d}
    ! c  W3 Y9 z6 T+ C" A. i5 d3 i, c
  14. .ClassifyMain{width:100%;overflow:hidden;margin-top:20px}- L! @# H( h, O- Q0 P$ ^
  15. .ClassifyBox{width:100%;overflow:hidden;display:none}
    $ d. I+ Q0 p8 \9 L- c& I
  16. .ClassifyMain .show{display:block}) h: n% D% {9 k2 {  Y; f* [+ \8 X0 @
  17. .ClassifyContent{width:300px;height:400px;float:left;background:#f8f8f8}7 B2 R; M- t( K: l0 q2 @* ?
  18. .ClassifyContentH{width:100%;height:30px;font:24px/30px 'microsoft yahei';text-align:center;padding-top:50px}
    ( T1 [, Z" T' }
  19. .ClassifyContentInfo{padding:20px;height:280px;font:16px/30px arial,'microsoft yahei';text-align:justify}% T" X: F/ `* [+ p: c! Q
  20. .ClassifyImages{width:890px;height:400px;float:right;justify-content:space-between;display:flex;flex-flow:row wrap}
    1 s# l$ t  S1 M+ h6 m- t: I
  21. .ClassifyImages li{width:32.5%}
    ! J+ O& o0 D* B# S: F
  22. .ClassifyImages li:nth-child(4),.ClassifyImages li:nth-child(5),.ClassifyImages li:nth-child(6){margin-top:10px}! ?/ T5 ]* S$ M) H  i2 ?( }1 S. O
  23. .ClassifyImages li img{width:100%;display:block}& J6 D5 I  V2 `. `
  24. </style>; h8 Y0 Q2 f2 [  M4 B
  25. <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    6 g; I" h( c, R$ E
  26. </head>
    ) g4 `. h( k  U
  27. <body>
    4 M% `/ L) `; r& w6 t1 i
  28. <div class="Classify">" E0 f9 a9 a4 C  |! l
  29.         <div class="ClassifyH">主题展会
    / O3 `; b" z9 b3 Y+ a0 v, B; Q+ h+ r
  30.                 <ul class="ClassifyNav">( L" T  q' R9 a4 ^  i
  31.                         <li class="active">健康与美容</li>* u% u) w8 a! e4 h: h! J: |
  32.                         <li>女性时尚</li>
    8 N; S+ |% T1 Z; A
  33.                         <li>母婴用品</li>
    6 H4 r. \1 \$ i" k( K& a4 Y! p, c+ G
  34.                         <li>家庭与厨房</li>2 k" I# R( e5 E( _
  35.                         <li>新娘礼服与婚纱</li>+ I2 z, D5 G# ^
  36.                         <li>职业与教育</li>
    5 ^: a/ D" P2 {$ }8 b/ e( d5 U  j
  37.                         <li>银行与金融</li>
    ( v& p$ p* r) e( w8 \
  38.                         <li>相关产品</li># D6 p. ^/ a$ R1 |2 ]! X
  39.                 </ul>- O/ L9 {) x9 h: {: k5 Y, \5 o
  40.         </div>
    $ \# C2 P& r0 m2 Q
  41.         <div class="ClassifyMain">- U" _! C( S8 e1 c& S
  42.                 <div class="ClassifyBox show">/ l% O# w' W1 Y6 V  u2 R
  43.                         <div class="ClassifyContent">
    / N1 A; z  H1 R. F  |5 ?6 t9 X
  44.                                 <div class="ClassifyContentH">健康与美容</div>
    ; d6 x$ s5 y1 f- n6 W
  45.                                 <div class="ClassifyContentInfo">健康的标准、影响健康的因素;亚健康的基本概念、主要表现、出现亚健康的原因、从健康到亚健康再到疾病的发展过程以及自我检测的方法、维护健康的基本原则和措施;介绍了人的一生各个时期的生理特点、心理特点及其注意事项、优生优育,预防先天性畸形的基本常识</div>
    ) T" q: r8 S6 W- f/ B
  46.                         </div>+ ^5 ~( ?% i4 W1 b0 Y
  47.                         <ul class="ClassifyImages">: d- Z5 h, k6 h$ j. S* K4 Z; e
  48.                                 <li><img src="pic/classify.jpg"/></li>- t7 x  _) B/ y9 |
  49.                                 <li><img src="pic/classify.jpg"/></li>
    % v8 ^/ E% j. b. \
  50.                                 <li><img src="pic/classify.jpg"/></li>
    ; q$ T8 S' y7 ~, H7 G
  51.                                 <li><img src="pic/classify.jpg"/></li>
    ' u( R8 L2 Q0 \0 J1 o  Q
  52.                                 <li><img src="pic/classify.jpg"/></li>
    9 C; P9 t" f; l6 |: [# |6 P
  53.                                 <li><img src="pic/classify.jpg"/></li>
    3 K5 o  B7 a, _: {
  54.                         </ul>' S. u' |5 v3 |( \
  55.                 </div>, Q1 F- z' a$ \2 f" F' H$ s9 I( k
  56.                 <div class="ClassifyBox">  s( x4 f  Z5 Y$ `0 x& k
  57.                         <div class="ClassifyContent">& K$ p' B% W6 F$ K
  58.                                 <div class="ClassifyContentH">女性时尚</div>+ f+ T2 ^' R0 k$ y$ r5 o
  59.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>5 J: _" {) H( I0 M) o: l( ~
  60.                         </div>: b- G2 {9 V) Z* D2 U
  61.                         <ul class="ClassifyImages">
    : e3 b& o8 q6 Q' \5 o( y
  62.                                 <li><img src="pic/classify.jpg"/></li>7 o* F# L9 w) C  l  [# o
  63.                                 <li><img src="pic/classify.jpg"/></li>
    . W/ Y+ v- f- U1 ^$ j
  64.                                 <li><img src="pic/classify.jpg"/></li>% C2 G! B! D- h" K/ J
  65.                                 <li><img src="pic/classify.jpg"/></li>
    4 H# V3 ^  n8 m" ~1 o% J- h
  66.                                 <li><img src="pic/classify.jpg"/></li>
    ) K7 T: D: _: ~8 R4 S. j: B
  67.                                 <li><img src="pic/classify.jpg"/></li>
    3 S: B. a# ^" A0 o: c) f+ l# i
  68.                         </ul>
    & J% p3 X2 [+ E& K, v: g' _, A7 U
  69.                 </div>2 S; v$ b1 ]3 `5 ?; l3 v
  70.                 <div class="ClassifyBox">* {$ M( f  V/ m$ j. Y
  71.                         <div class="ClassifyContent">
    : d1 l; b9 S! w$ i( G! D9 t
  72.                                 <div class="ClassifyContentH">母婴用品</div>- R& V2 r) B) P1 U
  73.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>9 y1 g2 N* I2 }
  74.                         </div>7 |: D0 z1 n( c) ?7 z
  75.                         <ul class="ClassifyImages">% _* [! k: ]/ |8 S  y) A
  76.                                 <li><img src="pic/classify.jpg"/></li>
    8 R, N- g: l9 t0 a) }# j/ N; `
  77.                                 <li><img src="pic/classify.jpg"/></li>8 t! w! ?% d  i' o* f& j, d
  78.                                 <li><img src="pic/classify.jpg"/></li>: K; o1 k  K% f. e
  79.                                 <li><img src="pic/classify.jpg"/></li>
    ( l* k; f* P2 ~, @# l" o; X, d
  80.                                 <li><img src="pic/classify.jpg"/></li>7 h: Q8 w7 B' Y1 t0 W
  81.                                 <li><img src="pic/classify.jpg"/></li>
    3 \& ?1 l  T/ G/ b0 o
  82.                         </ul>" d7 G. y* l* F
  83.                 </div>% X8 |- |! }9 h" d6 r9 Z
  84.                 <div class="ClassifyBox">5 W8 u; a0 J1 X
  85.                         <div class="ClassifyContent">
    " p8 H1 m" O9 I. c! ]" q3 g
  86.                                 <div class="ClassifyContentH">家庭与厨房</div>5 R& S( e4 s2 e% ]
  87.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    2 z% a9 F- z2 z9 y- Q' Q
  88.                         </div>. c% D% X3 d3 P% U! h6 j2 @
  89.                         <ul class="ClassifyImages">" A  j8 o8 N5 C
  90.                                 <li><img src="pic/classify.jpg"/></li>
    % J4 ?3 V2 \' L) v' h( S
  91.                                 <li><img src="pic/classify.jpg"/></li>* r- G/ A* I3 P! Q0 \  B7 ^0 u
  92.                                 <li><img src="pic/classify.jpg"/></li>
    " S3 O: y+ a! S4 T
  93.                                 <li><img src="pic/classify.jpg"/></li>
    8 E" q: s7 L( S. y* `
  94.                                 <li><img src="pic/classify.jpg"/></li>5 {& |+ ~9 y9 p1 i* g4 w, {- z2 e
  95.                                 <li><img src="pic/classify.jpg"/></li>
    " F+ s$ A3 A) i% }
  96.                         </ul>. u! |6 h' H6 J
  97.                 </div>; U1 N) k4 }, K
  98.                 <div class="ClassifyBox">; L# @3 x/ f% ^/ u1 G4 y3 X) `
  99.                         <div class="ClassifyContent">( B9 Q$ Q6 H; J1 P5 X( y
  100.                                 <div class="ClassifyContentH">新娘礼服与婚纱</div>
    ) H4 ~0 H  g2 X
  101.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    6 s+ h8 D3 @! `" |& |2 [" A
  102.                         </div>
    7 }4 }* w  X4 @9 @, R
  103.                         <ul class="ClassifyImages">! g  ?+ q3 t. `  j( d
  104.                                 <li><img src="pic/classify.jpg"/></li>
      |9 U+ N: E0 m, U! V
  105.                                 <li><img src="pic/classify.jpg"/></li>% B! b4 F) O( e9 w7 {6 g
  106.                                 <li><img src="pic/classify.jpg"/></li>) N% c& v. T  c: K0 b
  107.                                 <li><img src="pic/classify.jpg"/></li>
    $ S, J. `7 I) z! d: v8 L) K
  108.                                 <li><img src="pic/classify.jpg"/></li>
    6 Y) f0 I* z) ~. B) P' P2 i1 J' S
  109.                                 <li><img src="pic/classify.jpg"/></li>
    ; r2 B" j7 X1 M9 Y
  110.                         </ul>
    ; T6 K$ y1 {3 g) ?- n; ?
  111.                 </div>, w4 k0 ^; C# o: A: `; Y! p6 A
  112.                 <div class="ClassifyBox">
    # v2 v6 p% W4 S& b- u
  113.                         <div class="ClassifyContent">% }% d5 D1 B' N+ X) `9 d
  114.                                 <div class="ClassifyContentH">职业与教育</div>
    ; W- n  u# E' k- a' E
  115.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>. I1 Z: G0 K$ E  F
  116.                         </div>7 |* W! a# |2 N4 w; j/ K9 O: D
  117.                         <ul class="ClassifyImages">
    # S# R! E, Z' R
  118.                                 <li><img src="pic/classify.jpg"/></li>
    + m1 R' A3 Y( T
  119.                                 <li><img src="pic/classify.jpg"/></li>
    & b# O" k) F8 C$ Q' g2 T
  120.                                 <li><img src="pic/classify.jpg"/></li>/ t# [3 ~1 N2 ^4 s2 J  G6 I
  121.                                 <li><img src="pic/classify.jpg"/></li>
    4 n: N* b3 c6 t- n) N1 P0 }
  122.                                 <li><img src="pic/classify.jpg"/></li>
    5 ?6 f) W1 {) `5 U6 i4 I
  123.                                 <li><img src="pic/classify.jpg"/></li>/ U% w  c# a7 ?0 X3 |$ B
  124.                         </ul>
    0 j% I- Y8 A5 K5 G0 N, m
  125.                 </div>
    , c5 i0 u' |: t" F- u& ~9 C
  126.                 <div class="ClassifyBox">
    / ?' m* P+ @$ J& Z- K- {; w
  127.                         <div class="ClassifyContent">" i8 \- U! U( D4 T
  128.                                 <div class="ClassifyContentH">银行与金融</div>
    % p3 ~" D4 D  W6 D
  129.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>4 j$ F) z) M7 p6 b8 V* A+ ]9 Y
  130.                         </div>
    ! {& ^& l$ P3 D# Q
  131.                         <ul class="ClassifyImages">
      y; S# O1 \& W' K
  132.                                 <li><img src="pic/classify.jpg"/></li>* ~" J3 }; W2 N* @: M" g: H
  133.                                 <li><img src="pic/classify.jpg"/></li>" L, T. c' N4 L0 ]$ @
  134.                                 <li><img src="pic/classify.jpg"/></li>
    + a7 ?5 }* Y' O9 z
  135.                                 <li><img src="pic/classify.jpg"/></li>
    ) G6 W+ |: q6 G  N, c" C
  136.                                 <li><img src="pic/classify.jpg"/></li>
    " U* W3 v; m$ @  p2 L$ V
  137.                                 <li><img src="pic/classify.jpg"/></li>
    : b0 M$ X1 ^1 s. s" G, }
  138.                         </ul>
    / P- K  y- A) A( v$ Y
  139.                 </div>) `# g7 H6 N$ V5 _# ~% F
  140.                 <div class="ClassifyBox">
    * p6 a" N; Y4 G8 ^9 m! f4 _
  141.                         <div class="ClassifyContent">
    $ {; [9 ^: V* U
  142.                                 <div class="ClassifyContentH">相关产品</div>
    5 c- v5 g% M: [2 l5 Q
  143.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    7 n0 x6 P4 Z! Z9 Q
  144.                         </div>' i8 g. p7 i/ _4 X
  145.                         <ul class="ClassifyImages">
    - c; x- @% |: [+ A# ~0 j
  146.                                 <li><img src="pic/classify.jpg"/></li>% E5 p1 w+ S+ B0 c( n' p4 m
  147.                                 <li><img src="pic/classify.jpg"/></li>" H7 l% p+ S5 z. U* R3 u
  148.                                 <li><img src="pic/classify.jpg"/></li>
    ; ~; |: z3 u1 m: @# z/ [5 V
  149.                                 <li><img src="pic/classify.jpg"/></li>( F" r$ ]" ?* w
  150.                                 <li><img src="pic/classify.jpg"/></li>- M0 y) Z8 e8 z" H* h
  151.                                 <li><img src="pic/classify.jpg"/></li>
    6 q; a8 `( Q% f( }. }
  152.                         </ul>
    % `' r, j; W  n) g/ V3 A/ `4 Z
  153.                 </div>
    9 h! B+ l9 O5 v& ^+ i4 J
  154.         </div>
    # _: X! ~* \3 \) {! b% Z$ w# Z' W
  155. </div>
    1 ^" f3 S' m3 v
  156. <script>
    3 d5 V2 f2 }$ y  F+ n
  157. //展会分类切换
    & U! |0 F( C7 t9 W' Z! N
  158. $(function(){               
    / c0 [# ~) c' m6 R5 G1 W- g! i
  159.         $('.ClassifyNav li').mouseover(function(){0 o" U6 E3 v) ~. G, X
  160.                 var liindex = $('.ClassifyNav li').index(this);0 d3 {1 z8 N) V* O6 `
  161.                 $(this).addClass('active').siblings().removeClass('active');
    ' O. O/ z. G, [- m9 v" w7 b
  162.                 $('.ClassifyBox').eq(liindex).fadeIn(150).siblings('.ClassifyBox').hide();
    ) Z3 n+ h6 F- i" I: V7 W5 B# [' |* U
  163.                 var liWidth = $('.ClassifyNav li').width();
    : O0 U& l2 d  v8 S
  164.                 $('.ClassifyNav p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
    ! M5 I2 ^$ E7 S/ d& w( e/ q
  165.         });
    # w0 B6 O9 v3 ~6 x0 F9 o) V
  166. });2 t2 ]. o4 o: L* e, C
  167. </script>: ?4 S5 ]3 e$ O& Y6 g
  168. </body>
    4 A1 _# F. r- K% C$ ~  w) W/ ]
  169. </html>
复制代码

& W% d( |6 C8 d! e3 Y
( T; H4 R$ K" w' y3 V

0

主题

5

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 19-9-20 23:59:41 | 显示全部楼层         
相当不错,感谢无私分享精神!
回复

使用道具 举报

0

主题

6

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 20-2-29 03:02:17 | 显示全部楼层         
小手一抖,钱钱到手!
回复

使用道具 举报

0

主题

8

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 20-5-9 12:25:39 | 显示全部楼层         
沙发!沙发!
回复

使用道具 举报

网站简介

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