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

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

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

765

主题

779

帖子

3万

积分

董事

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

积分
33029
发表于 19-5-30 18:06:54 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果完整代码:! N* ~3 _$ }( x/ s9 W6 O
  1. <!doctype html>
    7 p3 Q  e( S: {- ~! ~( _# @; c3 T
  2. <html>" n8 ^& S: m& v0 f  _. ~. R
  3. <head>* v8 g0 m/ H) S% ^6 Q4 u
  4. <style>9 n; i& v! X& {/ `5 d( f
  5. *{padding:0; margin:0;border:0}
    % ^( T6 `! l( P1 Z/ K
  6. li{list-style:none}, n2 Z# |9 a( S! Y' {; l6 Z& K& d$ [
  7. * O/ A! B9 H' C% C- a
  8. 8 _* L9 c+ V2 W8 E
  9. .Classify{width:1200px;margin:0 auto}
    % h8 L- i& Z2 d: m
  10. .ClassifyH{width:100%;height:50px;position:relative;font:24px/50px 'microsoft yahei';border-bottom:2px solid #eee}- }4 n( _: w  u0 d
  11. .ClassifyNav{position:absolute;bottom:0;right:0;height:40px;font:16px/40px 'microsoft yahei'}2 k8 ^! f9 X2 l9 Z7 M" B1 N
  12. .ClassifyNav>li{float:left;margin-left:10px;cursor:pointer}
    & }0 K4 p" w1 J- E8 y% Y" Z( S
  13. .ClassifyNav>.active:after{content:"";display:block;width:100%;height:2px;background:#f3006d}
    : o7 Y' S. h2 L" E  \
  14. .ClassifyMain{width:100%;overflow:hidden;margin-top:20px}
      d# z% i' n+ I4 H1 h" x% o
  15. .ClassifyBox{width:100%;overflow:hidden;display:none}/ M$ R& J6 l/ y) `& ^
  16. .ClassifyMain .show{display:block}, e" M3 ?1 r8 ~# B8 Y
  17. .ClassifyContent{width:300px;height:400px;float:left;background:#f8f8f8}1 u; A0 ?1 _7 E6 c0 P! O) Q
  18. .ClassifyContentH{width:100%;height:30px;font:24px/30px 'microsoft yahei';text-align:center;padding-top:50px}7 L" ?) d$ r$ @, r- s  e% \- |7 _
  19. .ClassifyContentInfo{padding:20px;height:280px;font:16px/30px arial,'microsoft yahei';text-align:justify}1 i  p1 c  `7 R% T) j! b! i* h7 N
  20. .ClassifyImages{width:890px;height:400px;float:right;justify-content:space-between;display:flex;flex-flow:row wrap}
    ) C5 x2 e9 h9 f" A
  21. .ClassifyImages li{width:32.5%}, T' e8 T/ ?  Q
  22. .ClassifyImages li:nth-child(4),.ClassifyImages li:nth-child(5),.ClassifyImages li:nth-child(6){margin-top:10px}
    8 y$ L7 w; \! }. F  w
  23. .ClassifyImages li img{width:100%;display:block}
      F  @$ h7 x) R
  24. </style>
    ) Z4 N) Q: G2 @8 }1 F+ d
  25. <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    5 ^9 p3 w- P1 u% ?+ m
  26. </head>+ O5 r' @: X6 h. [; z  `$ n
  27. <body>$ C9 x# R3 @' H4 [  U( H: t) s
  28. <div class="Classify">
    ) r+ E* P5 u8 E6 f
  29.         <div class="ClassifyH">主题展会
    ( C- v% w1 ?! F2 G$ y
  30.                 <ul class="ClassifyNav">
    7 E2 T+ W; i: K( `& E$ \# ?
  31.                         <li class="active">健康与美容</li>+ {2 p3 c3 d# ^& A" |9 I7 V
  32.                         <li>女性时尚</li>
    5 W1 [4 t. g4 ]" @) u, V$ _
  33.                         <li>母婴用品</li>3 B) ]- T% |! M$ C( g
  34.                         <li>家庭与厨房</li>$ r/ z, {* S2 b! {
  35.                         <li>新娘礼服与婚纱</li>) [7 N& Z& l) l9 B
  36.                         <li>职业与教育</li>
    8 S5 X0 T6 ]4 I  @' V6 I9 l
  37.                         <li>银行与金融</li>9 d& d$ t: y5 @7 M7 F" \1 O, Q
  38.                         <li>相关产品</li>
    ( c" Y1 }1 H8 S* x2 L9 P
  39.                 </ul>, H* Y' n' X4 m0 c2 ~, t+ [
  40.         </div>1 I9 ]% W. C+ ^
  41.         <div class="ClassifyMain">; u$ `& ]" z* {4 q
  42.                 <div class="ClassifyBox show">
    8 J! F, ^: F# g7 H
  43.                         <div class="ClassifyContent">- X5 E0 q( K" S5 C' v
  44.                                 <div class="ClassifyContentH">健康与美容</div>
    - H: |/ Z; [3 M/ y" a
  45.                                 <div class="ClassifyContentInfo">健康的标准、影响健康的因素;亚健康的基本概念、主要表现、出现亚健康的原因、从健康到亚健康再到疾病的发展过程以及自我检测的方法、维护健康的基本原则和措施;介绍了人的一生各个时期的生理特点、心理特点及其注意事项、优生优育,预防先天性畸形的基本常识</div>; O& {! Z+ n: h& p
  46.                         </div>
    2 `; K2 Q" k$ j% K9 ?: N
  47.                         <ul class="ClassifyImages">! M' |* h" c8 G+ P) r
  48.                                 <li><img src="pic/classify.jpg"/></li>
    8 v. k% L! Y, Y0 L4 d
  49.                                 <li><img src="pic/classify.jpg"/></li>
      t0 ~* H2 R7 H* q6 v! i, f) K
  50.                                 <li><img src="pic/classify.jpg"/></li># x  K/ V) h2 p+ q/ U( F. Y
  51.                                 <li><img src="pic/classify.jpg"/></li>/ f/ d( p& i0 N- y7 @
  52.                                 <li><img src="pic/classify.jpg"/></li>
    ! a. {" [0 F! ?. G" G% p5 t
  53.                                 <li><img src="pic/classify.jpg"/></li>2 `' t# ^4 X& ]0 F. v/ Z% x
  54.                         </ul>8 s9 n! q7 o# \
  55.                 </div>5 T5 Y$ K- T5 G- w; j
  56.                 <div class="ClassifyBox">5 G, ?" G1 ^. m. m2 J- J2 l$ M7 d
  57.                         <div class="ClassifyContent">
    7 ~2 e; }4 Q4 x) ~! ?8 Z7 l4 Q) C
  58.                                 <div class="ClassifyContentH">女性时尚</div>( R5 C: D+ _' B, e
  59.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>7 `- ~: b. [; l; B- S( _/ v# |
  60.                         </div>) P. ?$ J' S4 ~" z8 V' o  ?
  61.                         <ul class="ClassifyImages">
    * t) p' [" \( C
  62.                                 <li><img src="pic/classify.jpg"/></li>- O! q- V6 X# L0 K( Z
  63.                                 <li><img src="pic/classify.jpg"/></li>/ l4 z! J5 M4 O. u
  64.                                 <li><img src="pic/classify.jpg"/></li>, d; n3 W, F6 `6 O) y4 c0 q
  65.                                 <li><img src="pic/classify.jpg"/></li>$ N4 [6 k* b* I( I; V, \0 s2 ^: c
  66.                                 <li><img src="pic/classify.jpg"/></li>
    1 X. E1 ^* A- u0 h
  67.                                 <li><img src="pic/classify.jpg"/></li>8 S$ M. P4 k4 K+ y" J2 t9 i
  68.                         </ul>
    2 f+ K( w2 S6 k
  69.                 </div>
    1 z- [/ {/ W/ F% w( M2 B7 S
  70.                 <div class="ClassifyBox">
    ' G* [) R, }5 Q- j) j' I. N
  71.                         <div class="ClassifyContent">
    & |  R$ Z+ @8 v7 ?% @# x( R' x
  72.                                 <div class="ClassifyContentH">母婴用品</div>1 b/ R+ N% N* T  U, ?# M' t
  73.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>9 I" _# X  e: e: c
  74.                         </div>
    5 [. e! v- k4 w+ W( g! t2 b
  75.                         <ul class="ClassifyImages">
    , C1 E4 r: E+ E5 i" M
  76.                                 <li><img src="pic/classify.jpg"/></li>
    6 U0 f# _; X) F* r7 Q
  77.                                 <li><img src="pic/classify.jpg"/></li>
      d0 d% R, C, a# R+ ^9 {# e7 q
  78.                                 <li><img src="pic/classify.jpg"/></li>
    * J3 w0 \' T2 A( R7 T% w' x1 I+ h
  79.                                 <li><img src="pic/classify.jpg"/></li>% W+ b8 Q: V& \5 Z5 U4 ~
  80.                                 <li><img src="pic/classify.jpg"/></li>
    5 S2 @" d# p+ O9 m
  81.                                 <li><img src="pic/classify.jpg"/></li>
    & o8 i$ M" C  _- Q
  82.                         </ul>' ?% K1 t5 g- @2 D) f+ J5 \
  83.                 </div>
    2 M8 p" j$ l9 l! A: W. ^
  84.                 <div class="ClassifyBox">
    # v5 }+ E& a0 J2 x& N1 b
  85.                         <div class="ClassifyContent">* V0 F0 Y, |2 T' \$ u
  86.                                 <div class="ClassifyContentH">家庭与厨房</div>: S" Q' _  _% `2 f$ ?
  87.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>! o5 x+ X/ E  x2 X" C
  88.                         </div>
    1 O7 U7 C  v, R0 n8 _1 d
  89.                         <ul class="ClassifyImages">3 [9 P. {1 A2 t, G9 I; Z9 F
  90.                                 <li><img src="pic/classify.jpg"/></li>5 H0 S- p) Q; j! o
  91.                                 <li><img src="pic/classify.jpg"/></li>' M$ S3 Q, c5 z- O6 b- F& n
  92.                                 <li><img src="pic/classify.jpg"/></li>
    2 h' {! ~0 C  b7 b5 m4 T  h9 W
  93.                                 <li><img src="pic/classify.jpg"/></li>
    - b$ [  F% @9 o4 a( k
  94.                                 <li><img src="pic/classify.jpg"/></li>* u+ D% N, d- N" `$ O
  95.                                 <li><img src="pic/classify.jpg"/></li>
    - y7 ?/ }' f" n* I3 J
  96.                         </ul>
    ' t7 H( P; s! {2 c) e8 |, M
  97.                 </div>/ n3 n8 I* L' I) ~$ W+ A
  98.                 <div class="ClassifyBox"># V2 c( E8 o- ]# e% g- i
  99.                         <div class="ClassifyContent">0 L2 M# W" i* R1 p  f
  100.                                 <div class="ClassifyContentH">新娘礼服与婚纱</div>
    ; e; i$ d) W7 j( S  D1 `
  101.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    9 Q2 Y" e5 F+ j2 a# R
  102.                         </div>
    3 N1 ]# v, ~# H1 V
  103.                         <ul class="ClassifyImages">5 z( y5 j4 b9 @0 r5 i6 t$ b/ H7 m+ y
  104.                                 <li><img src="pic/classify.jpg"/></li>* s9 [" z: w" c& j
  105.                                 <li><img src="pic/classify.jpg"/></li>
    9 p- ~! E+ a5 ~' {0 e$ ~, w
  106.                                 <li><img src="pic/classify.jpg"/></li>
    ! r# w$ v9 y6 |) B- B4 j
  107.                                 <li><img src="pic/classify.jpg"/></li>
    / `7 y- l, s+ H6 L( U' D' `
  108.                                 <li><img src="pic/classify.jpg"/></li>
    1 P0 ^( R% w* E. S5 p% T
  109.                                 <li><img src="pic/classify.jpg"/></li>
    # ]  A# P+ k3 K. y
  110.                         </ul>9 g7 {$ K7 }8 u7 L' {+ t5 R* _
  111.                 </div>* C! S. K; j7 @# H* ?3 t4 t
  112.                 <div class="ClassifyBox">
    ( U5 a& k0 `/ y' _/ o' l4 [
  113.                         <div class="ClassifyContent">
    ! G( E) y1 q- G! l. O& ^' ~
  114.                                 <div class="ClassifyContentH">职业与教育</div>" Z5 W4 X6 H3 T
  115.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>  j# w8 {2 L5 J, b$ }) z* ~/ I! J
  116.                         </div>/ d0 l; e! C/ q$ w% p% g  V# N( _
  117.                         <ul class="ClassifyImages">
    9 h/ K  }% w# e. ^% i  q* H2 s* d
  118.                                 <li><img src="pic/classify.jpg"/></li>. p& Z* s- |* m
  119.                                 <li><img src="pic/classify.jpg"/></li>! C. v% v7 s! E* y9 u1 w- r
  120.                                 <li><img src="pic/classify.jpg"/></li>
    5 ^; O3 l2 E! D# T
  121.                                 <li><img src="pic/classify.jpg"/></li>: r) ?2 |& d- S4 `0 I% W
  122.                                 <li><img src="pic/classify.jpg"/></li>
    $ e: f/ u& F2 U( w' V  \! `
  123.                                 <li><img src="pic/classify.jpg"/></li>8 s9 M7 T3 |( H" _
  124.                         </ul>8 n( U3 M1 R7 ~5 f5 t% ]
  125.                 </div>
    ! ]1 I+ _6 F4 Z& U; |8 ?/ q
  126.                 <div class="ClassifyBox">0 [0 _8 E1 k7 `, z+ f
  127.                         <div class="ClassifyContent">
    ( J7 y9 j' C4 G% N! T) c
  128.                                 <div class="ClassifyContentH">银行与金融</div>
    . e0 S' r+ z+ B$ W( K. `
  129.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>( Q% G5 F( \9 x; L7 K
  130.                         </div>- _0 G$ D% ]1 I* U7 M- X
  131.                         <ul class="ClassifyImages">
    * o, U2 V2 W8 Z- o
  132.                                 <li><img src="pic/classify.jpg"/></li>
    7 q' ~. {7 k) s$ W7 }
  133.                                 <li><img src="pic/classify.jpg"/></li>
    8 }6 I# ~$ u+ J, O
  134.                                 <li><img src="pic/classify.jpg"/></li>
    ) r2 P) B8 p4 k6 h7 d6 u$ J( Y. b
  135.                                 <li><img src="pic/classify.jpg"/></li>
    1 V( C& _( N9 M
  136.                                 <li><img src="pic/classify.jpg"/></li>& p6 ^- @2 w$ H7 r- c$ b
  137.                                 <li><img src="pic/classify.jpg"/></li>
    % T" k. h# t4 T, X0 t3 A4 ^; |% [
  138.                         </ul>
    - j. l! z' x$ V' x+ S6 r" P, e
  139.                 </div>7 k' W4 m' D5 J! t7 ~+ i* M: w
  140.                 <div class="ClassifyBox">) d8 B( n" a) `# {
  141.                         <div class="ClassifyContent">
    ' K& |) |" L' O) c: a( v
  142.                                 <div class="ClassifyContentH">相关产品</div>$ u$ `  T5 ~, F+ ~" P2 {( y
  143.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>( V: N# G" p  L+ y: U
  144.                         </div>
    & c" I' r1 I( Y1 T# s
  145.                         <ul class="ClassifyImages">
    % y; |: O, x- r& A$ M6 P
  146.                                 <li><img src="pic/classify.jpg"/></li>
    ! n1 g* Y7 r; n
  147.                                 <li><img src="pic/classify.jpg"/></li>4 b6 @; c: b# t- l
  148.                                 <li><img src="pic/classify.jpg"/></li>" L8 f' V& v7 [8 _. A
  149.                                 <li><img src="pic/classify.jpg"/></li>+ {- K7 n6 P8 R- V' F$ ?& X
  150.                                 <li><img src="pic/classify.jpg"/></li>* h! x0 A+ |" u' e3 _
  151.                                 <li><img src="pic/classify.jpg"/></li>
    ( N, @. B% G$ Z+ W
  152.                         </ul>6 e- [7 m0 w4 h1 M6 v
  153.                 </div>3 s2 {; y# }& J
  154.         </div>
    ; C* Q! F* F' N7 J% E& Q, \
  155. </div>
    % m, {+ K  k- r% h; _7 [( b# h
  156. <script>. M) ~% m. {! ?% R3 {
  157. //展会分类切换6 v6 x# o( d1 R1 p
  158. $(function(){                8 _8 w) Z) R4 h0 u5 K  w
  159.         $('.ClassifyNav li').mouseover(function(){) q5 E3 }3 U" s8 I: h
  160.                 var liindex = $('.ClassifyNav li').index(this);
    6 X; p# E2 K) |6 r5 {
  161.                 $(this).addClass('active').siblings().removeClass('active');
    0 o5 t5 A% K* I9 k, k  w% j  U) E
  162.                 $('.ClassifyBox').eq(liindex).fadeIn(150).siblings('.ClassifyBox').hide();
    4 [4 m! N' c2 R# l9 C
  163.                 var liWidth = $('.ClassifyNav li').width();' b' p9 [1 w# z$ c& c: P. l
  164.                 $('.ClassifyNav p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);" P; G7 j9 c5 i: f8 n
  165.         });
    ; s: p0 r% N1 p0 j9 H
  166. });
    ) b' p$ l, ^: J; B+ m
  167. </script>
    6 I  r( C$ `# @" Y. q3 X1 a$ |
  168. </body>6 X5 Z6 x% H/ B& b8 M+ |
  169. </html>
复制代码
; o+ ~: c* k! f8 f  u
; r2 g: I, T. W7 R; K- Y) o2 Q$ u

0

主题

6

帖子

4

积分

1°伸手党

Rank: 2

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

使用道具 举报

0

主题

8

帖子

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%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除