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

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

1
回复
2555
查看
[复制链接]

761

主题

775

帖子

3万

积分

董事

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

积分
32836
发表于 19-5-30 18:06:54 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果完整代码:  T- ^) S% ]" d2 q9 j; L: H
  1. <!doctype html>
    1 j, b3 _( Q- r$ g
  2. <html>
    0 r/ R- r$ B( p; w# c! a8 d) _
  3. <head>
    - y5 \5 ]8 k( w
  4. <style>
    6 u' p" Y8 ?) s; M: G
  5. *{padding:0; margin:0;border:0}
    1 G8 k6 W! y' ^' b2 i
  6. li{list-style:none}0 A5 M. }# X: q
  7. ' P, k" i' E# z$ i
  8. ; A  M4 g$ I1 t6 r6 ^3 D
  9. .Classify{width:1200px;margin:0 auto}2 F' I$ w# Z- R: I! s4 S* {5 r
  10. .ClassifyH{width:100%;height:50px;position:relative;font:24px/50px 'microsoft yahei';border-bottom:2px solid #eee}
    0 {! w' u, r, v2 K7 }2 ]0 u8 \" X
  11. .ClassifyNav{position:absolute;bottom:0;right:0;height:40px;font:16px/40px 'microsoft yahei'}
    2 Y" _! p) q* Z% U! m/ }
  12. .ClassifyNav>li{float:left;margin-left:10px;cursor:pointer}
      s. P9 J& y' A" a7 Z
  13. .ClassifyNav>.active:after{content:"";display:block;width:100%;height:2px;background:#f3006d}
    $ S4 b( |" s/ f) q- r6 b
  14. .ClassifyMain{width:100%;overflow:hidden;margin-top:20px}
    . {+ Y' k* `$ L( n, k
  15. .ClassifyBox{width:100%;overflow:hidden;display:none}+ K' U5 Z, m; v' f
  16. .ClassifyMain .show{display:block}
    : j1 x: e5 |+ p  ^9 \
  17. .ClassifyContent{width:300px;height:400px;float:left;background:#f8f8f8}. O7 y2 E9 Y. Y2 i
  18. .ClassifyContentH{width:100%;height:30px;font:24px/30px 'microsoft yahei';text-align:center;padding-top:50px}, X% S! G  j0 y; G" H  H- t0 C
  19. .ClassifyContentInfo{padding:20px;height:280px;font:16px/30px arial,'microsoft yahei';text-align:justify}& K3 S! D+ A" u/ X8 x/ }3 H
  20. .ClassifyImages{width:890px;height:400px;float:right;justify-content:space-between;display:flex;flex-flow:row wrap}
    # {, h$ ~* h; C- H
  21. .ClassifyImages li{width:32.5%}( I; I9 t) f4 r8 R! e9 U, B
  22. .ClassifyImages li:nth-child(4),.ClassifyImages li:nth-child(5),.ClassifyImages li:nth-child(6){margin-top:10px}
    + U' H0 e7 P7 p
  23. .ClassifyImages li img{width:100%;display:block}
    ! }% S0 b8 Y1 V3 b" x# Z  C5 g
  24. </style>
    7 A7 K1 `; f2 c5 J" s
  25. <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>5 A" Z3 s9 U8 C  W6 Y
  26. </head>
    ) d& u5 y8 B0 l5 h& \
  27. <body>
    , c9 E$ P3 Q" ?  r7 u  @: v" J3 E- w
  28. <div class="Classify">( c* L  h1 O# E: y
  29.         <div class="ClassifyH">主题展会; N  K/ \' T3 G
  30.                 <ul class="ClassifyNav">) i; V8 ^7 l, h9 o
  31.                         <li class="active">健康与美容</li>
    ' T8 r( Y* ?7 Q- d2 f0 `+ {$ S
  32.                         <li>女性时尚</li>, B/ R5 ?) t" N; t
  33.                         <li>母婴用品</li>
    5 y! h" L- [: ?& k( A
  34.                         <li>家庭与厨房</li>
    ; G- K+ W$ l: n6 `, q
  35.                         <li>新娘礼服与婚纱</li>
    6 G) v& q/ e7 ?6 H) b6 U* I
  36.                         <li>职业与教育</li>1 W  N- R# t. j9 `
  37.                         <li>银行与金融</li>
    ' F/ O1 X8 I: R- q0 h1 \; D
  38.                         <li>相关产品</li>
    - M# t: P* |/ A# s
  39.                 </ul>' O8 Q; L' O# K6 U
  40.         </div>6 N4 X4 C5 j9 Z; f/ J. U2 R) [
  41.         <div class="ClassifyMain">) l0 e( q% \- X4 k3 V& Q9 y0 h
  42.                 <div class="ClassifyBox show">/ D$ o. e; n8 @% e7 D
  43.                         <div class="ClassifyContent">% n2 N) g/ w- X
  44.                                 <div class="ClassifyContentH">健康与美容</div>
    / ~) ^3 v% ?! N" W- G0 [: ?
  45.                                 <div class="ClassifyContentInfo">健康的标准、影响健康的因素;亚健康的基本概念、主要表现、出现亚健康的原因、从健康到亚健康再到疾病的发展过程以及自我检测的方法、维护健康的基本原则和措施;介绍了人的一生各个时期的生理特点、心理特点及其注意事项、优生优育,预防先天性畸形的基本常识</div>5 Z' F0 M" C) c
  46.                         </div>
    ) l9 g7 b' |' W' m- a
  47.                         <ul class="ClassifyImages">3 X* i5 P* T1 t# u6 m& }- M
  48.                                 <li><img src="pic/classify.jpg"/></li>
    ( U& a! A& H! ?  [. d6 f4 T
  49.                                 <li><img src="pic/classify.jpg"/></li>
    7 N# T& s3 x- O0 @; E/ C0 W% S: Z. F
  50.                                 <li><img src="pic/classify.jpg"/></li>& G4 W- I4 {1 \' y3 x) Q# P
  51.                                 <li><img src="pic/classify.jpg"/></li>
    ) O+ }( a( h7 @8 C! i
  52.                                 <li><img src="pic/classify.jpg"/></li>( w! B+ y$ a; B/ O
  53.                                 <li><img src="pic/classify.jpg"/></li>2 A8 s8 i( g7 s8 R- m/ }$ n7 o
  54.                         </ul>
    : X2 s7 ]4 }& |, C: z. \
  55.                 </div>! Q& e: v/ Q' b; h& z& C- X. I0 i
  56.                 <div class="ClassifyBox">
    : p" D' p* ]/ n# r8 [  m
  57.                         <div class="ClassifyContent">, z- t7 A5 F, Y+ s
  58.                                 <div class="ClassifyContentH">女性时尚</div>$ G2 F5 o5 Z+ x. ^
  59.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>* \$ V0 `: T& |
  60.                         </div>2 _3 U# p  m# o; Q) G
  61.                         <ul class="ClassifyImages">
    2 Y' o2 ^3 c+ T# W7 \  [: W
  62.                                 <li><img src="pic/classify.jpg"/></li>9 E- n. v2 h# v3 Z9 Y0 E5 y& c
  63.                                 <li><img src="pic/classify.jpg"/></li>
    : H$ r! Y5 F& I: n& e/ ]! o; b* H
  64.                                 <li><img src="pic/classify.jpg"/></li>; Y' E; F; b* Y0 g+ U
  65.                                 <li><img src="pic/classify.jpg"/></li>
    , H7 J! G. s; o8 W0 G: T/ G! X
  66.                                 <li><img src="pic/classify.jpg"/></li>
    6 K4 Z" N/ z% @* F
  67.                                 <li><img src="pic/classify.jpg"/></li>0 }; o5 @$ a- d- f
  68.                         </ul>
      f  u1 v& d5 }1 D: U1 X
  69.                 </div>
    0 h3 [5 i' k. W' c" P
  70.                 <div class="ClassifyBox">" o& x: e* o- n; `) G4 j
  71.                         <div class="ClassifyContent">/ C4 [/ }# A$ ~, X
  72.                                 <div class="ClassifyContentH">母婴用品</div>
    * v6 L" g  u/ m) O5 G, [$ a
  73.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    : R* ~% N: y( A9 {. Y
  74.                         </div>
    9 s2 N7 K& \$ j9 y0 f  Z& o
  75.                         <ul class="ClassifyImages">
    7 X! y  E' E! o# \
  76.                                 <li><img src="pic/classify.jpg"/></li>9 i) w( R0 l0 ]1 o8 b. B
  77.                                 <li><img src="pic/classify.jpg"/></li>
    + s& _9 _0 L' l8 _
  78.                                 <li><img src="pic/classify.jpg"/></li>
    4 O' n/ y& e. f
  79.                                 <li><img src="pic/classify.jpg"/></li>4 \' T* y0 X3 l) V4 K( z$ s
  80.                                 <li><img src="pic/classify.jpg"/></li>
    " j% d" U2 }' K5 [& E! C1 h
  81.                                 <li><img src="pic/classify.jpg"/></li>
    0 C9 M1 b' d4 p  j! o  ^. y
  82.                         </ul>
    : M' I! o  E/ i  Q5 [; `
  83.                 </div>
    - _" Y# B! b' f
  84.                 <div class="ClassifyBox">. L& y9 M" p$ i
  85.                         <div class="ClassifyContent">
    $ l8 ], j$ o  |( [( f( N5 H% G0 W
  86.                                 <div class="ClassifyContentH">家庭与厨房</div>
    : s" I# E% C# H
  87.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    5 c% o7 v& J4 ^- b# a
  88.                         </div>; H  ^. Y; X; X( k! ]; h* Q
  89.                         <ul class="ClassifyImages">5 d+ Z' W1 h  d1 N. j, [' W0 w5 x
  90.                                 <li><img src="pic/classify.jpg"/></li>
    : F. [& F! I# |+ o& h8 M! v. r
  91.                                 <li><img src="pic/classify.jpg"/></li>& n2 C6 X, n7 k- S' D5 ]
  92.                                 <li><img src="pic/classify.jpg"/></li>
    9 Q1 q" j4 l7 r+ T
  93.                                 <li><img src="pic/classify.jpg"/></li>
    " Y5 f7 ]" k5 i/ ?
  94.                                 <li><img src="pic/classify.jpg"/></li>. h$ `  r( ]; h6 o+ M6 B% T! K
  95.                                 <li><img src="pic/classify.jpg"/></li>* ^# W& w- n% I5 g! r+ x
  96.                         </ul>2 o# B* |+ v& v% v
  97.                 </div>: e/ {4 X$ I# a2 Q
  98.                 <div class="ClassifyBox">
      ~' v* O6 X! c6 a# z
  99.                         <div class="ClassifyContent">1 v7 Y0 k: r0 }3 {0 ^
  100.                                 <div class="ClassifyContentH">新娘礼服与婚纱</div>
    ; B8 v2 X6 r( |% ]# f
  101.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>2 T* ^9 R: R3 Y
  102.                         </div>! I! A' d5 e6 ?) e
  103.                         <ul class="ClassifyImages">8 n3 G- E) @2 `1 c/ Y" z
  104.                                 <li><img src="pic/classify.jpg"/></li>0 Q/ ~8 N! @* ]& l( B
  105.                                 <li><img src="pic/classify.jpg"/></li>
    0 c0 p! _% f5 G; `
  106.                                 <li><img src="pic/classify.jpg"/></li>
    5 H* R: D* s$ ?/ N: s
  107.                                 <li><img src="pic/classify.jpg"/></li>
    9 J8 W5 _5 J5 o1 J2 D( C
  108.                                 <li><img src="pic/classify.jpg"/></li>8 I6 r& c9 {  Z7 Z0 s- x
  109.                                 <li><img src="pic/classify.jpg"/></li>
    ; D* h1 F' o: I0 D' k+ w  \2 D
  110.                         </ul>2 x* M5 x- q  F1 R: n; ~7 O/ g
  111.                 </div>; h" _# s0 j/ B
  112.                 <div class="ClassifyBox">9 x- _7 N& }3 I* d
  113.                         <div class="ClassifyContent">
    ! o# {/ m" i/ Z9 i
  114.                                 <div class="ClassifyContentH">职业与教育</div>
    8 x/ L5 r$ [; N7 e9 V& B
  115.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    ' h& ]0 |5 d( w2 [/ k" k4 P2 v% v0 O
  116.                         </div>
    9 Q6 n. {; l& z7 g2 v' r! g
  117.                         <ul class="ClassifyImages">
    8 Y  e" z7 r; M. f: z
  118.                                 <li><img src="pic/classify.jpg"/></li>5 M3 w8 E! W2 i4 h
  119.                                 <li><img src="pic/classify.jpg"/></li>
    : ?7 n" ?6 L+ F$ J$ V: Z0 J- \
  120.                                 <li><img src="pic/classify.jpg"/></li>& L5 v0 H- H- l3 z4 C6 n$ w! ]
  121.                                 <li><img src="pic/classify.jpg"/></li>
    5 _) N2 h* _3 J* T% d% v3 {, n+ O6 n# L
  122.                                 <li><img src="pic/classify.jpg"/></li>
    2 e+ A  f. E: u/ B& y, I0 U
  123.                                 <li><img src="pic/classify.jpg"/></li>
    7 B  }! _% p& T! p+ O
  124.                         </ul>
    3 ]) E* ^- m6 W5 J
  125.                 </div>6 I2 n7 y, Z' \' q: v8 g
  126.                 <div class="ClassifyBox">
    ! x1 l) a; X5 J
  127.                         <div class="ClassifyContent">. {+ i" v5 P8 N; b( g
  128.                                 <div class="ClassifyContentH">银行与金融</div>
    6 z' }6 @8 Z# W6 T3 g
  129.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    4 a; g- \, y+ z! f
  130.                         </div>
      [6 P# {' B! T: q
  131.                         <ul class="ClassifyImages">0 i3 ?( V# Z# H* b! Z6 C+ t
  132.                                 <li><img src="pic/classify.jpg"/></li>& f) {$ F# _3 S7 @) U+ C
  133.                                 <li><img src="pic/classify.jpg"/></li>
    ) [' s4 Y9 [0 m$ T! r
  134.                                 <li><img src="pic/classify.jpg"/></li>
    / f5 K' b  m6 S% l
  135.                                 <li><img src="pic/classify.jpg"/></li>
    - X1 m# W6 Y( N/ H2 r0 @
  136.                                 <li><img src="pic/classify.jpg"/></li>9 W! k* }) s: T; O6 [
  137.                                 <li><img src="pic/classify.jpg"/></li>) t) ?& B) w- G" \1 c
  138.                         </ul>
    0 s8 T6 ?0 k) p  o5 C8 I) ]
  139.                 </div>
    ' g% {: V" |+ a" L, i7 J( _
  140.                 <div class="ClassifyBox">
    4 v- }( `& Z! Q
  141.                         <div class="ClassifyContent">8 _0 ^( Q4 z  j: z1 y1 a: v
  142.                                 <div class="ClassifyContentH">相关产品</div>: P; n2 G4 r* L1 `
  143.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>; j% I$ O" f# l
  144.                         </div>$ O% [# `9 Z. p" u
  145.                         <ul class="ClassifyImages">3 @$ J) W; K# C& @( F. L; c8 m
  146.                                 <li><img src="pic/classify.jpg"/></li>
    # ?6 o  M, c( l4 {
  147.                                 <li><img src="pic/classify.jpg"/></li>
    4 L% V6 L$ Q, B, Y
  148.                                 <li><img src="pic/classify.jpg"/></li>- d2 }# |/ D; |/ h1 Y
  149.                                 <li><img src="pic/classify.jpg"/></li>/ z& x/ r) T( G5 _& |, ?
  150.                                 <li><img src="pic/classify.jpg"/></li># X9 w% \, @4 l+ z5 Z
  151.                                 <li><img src="pic/classify.jpg"/></li>* {, }. ]) U# ~, I2 u$ S4 V
  152.                         </ul>
    $ |2 i1 L' @" g. y
  153.                 </div>* M, _4 m* Y6 J- E* x/ t; [$ A
  154.         </div>% p: l! s# b2 T* n& y7 X7 n' l
  155. </div>6 C5 V  Q4 I& X. [) a8 r: x4 N) ]
  156. <script>
    # v1 S! T' e1 L! v
  157. //展会分类切换" K( Q7 i; a8 o. z% f7 B; @% D
  158. $(function(){               
    7 g7 w! F; ~" x
  159.         $('.ClassifyNav li').mouseover(function(){- {+ A8 u1 e2 n) s: z0 Q. m
  160.                 var liindex = $('.ClassifyNav li').index(this);
    * F0 [7 f5 s3 `+ v
  161.                 $(this).addClass('active').siblings().removeClass('active');- L0 |9 o' }' I! ~) W6 B
  162.                 $('.ClassifyBox').eq(liindex).fadeIn(150).siblings('.ClassifyBox').hide();; o; C! n! D& X, x) J9 G
  163.                 var liWidth = $('.ClassifyNav li').width();2 L! D& y0 G2 o: e4 l! h. b: N
  164.                 $('.ClassifyNav p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
    : a, L# }7 Z! a
  165.         });5 L5 V* _. B% g1 u9 @
  166. });  X$ @2 q; r8 \- ^6 f$ B5 K
  167. </script>: H' K1 G- o$ B, t/ m# i
  168. </body>1 M0 X) ^' s5 @
  169. </html>
复制代码

2 b; I8 g4 J9 [" I( z
$ L1 g6 ]. O* a2 V2 B$ [: G

0

主题

2

帖子

4

积分

1°伸手党

Rank: 2

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

使用道具 举报

网站简介

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