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

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

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

763

主题

777

帖子

3万

积分

董事

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

积分
32942
发表于 19-5-30 18:06:54 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果完整代码:
* g: j7 E( [4 c/ V$ T" \3 e
  1. <!doctype html>
    / G9 A2 ~+ A* F5 l  c( p
  2. <html>3 z3 ?, T* k- l+ H1 H# }
  3. <head>6 {+ J& t9 n! t. r# f/ f/ t
  4. <style>
    1 s5 y6 _: p- o. {/ R3 u
  5. *{padding:0; margin:0;border:0}. U" `" j7 K- ^- x+ Y
  6. li{list-style:none}
    ! g9 K1 G8 i) V; k& {: n8 g
  7.   W* ]* x1 F$ g" @3 ]/ m. D) N
  8. + ?$ ]4 \5 Z5 [6 K
  9. .Classify{width:1200px;margin:0 auto}
    6 T- r* K% U- C, m& v
  10. .ClassifyH{width:100%;height:50px;position:relative;font:24px/50px 'microsoft yahei';border-bottom:2px solid #eee}
    " i: Y8 G# A% e1 D+ P7 b0 E
  11. .ClassifyNav{position:absolute;bottom:0;right:0;height:40px;font:16px/40px 'microsoft yahei'}
    $ _# N8 J1 {/ I6 ^2 p! p9 t
  12. .ClassifyNav>li{float:left;margin-left:10px;cursor:pointer}
    + r# U+ g" L- y$ [: y  {
  13. .ClassifyNav>.active:after{content:"";display:block;width:100%;height:2px;background:#f3006d}) X: V% w8 p( M
  14. .ClassifyMain{width:100%;overflow:hidden;margin-top:20px}& f8 @9 Z1 b4 H
  15. .ClassifyBox{width:100%;overflow:hidden;display:none}0 P  |0 G5 f1 D, z
  16. .ClassifyMain .show{display:block}; a# K9 J; @! }0 D
  17. .ClassifyContent{width:300px;height:400px;float:left;background:#f8f8f8}  l+ I# ?7 ?8 F4 n
  18. .ClassifyContentH{width:100%;height:30px;font:24px/30px 'microsoft yahei';text-align:center;padding-top:50px}8 r! G0 w  m  U2 |$ M
  19. .ClassifyContentInfo{padding:20px;height:280px;font:16px/30px arial,'microsoft yahei';text-align:justify}
    & H" j) }3 z8 a, T
  20. .ClassifyImages{width:890px;height:400px;float:right;justify-content:space-between;display:flex;flex-flow:row wrap}
    2 h" J0 \6 J- u- k) M7 U
  21. .ClassifyImages li{width:32.5%}
    5 |8 W7 O3 K0 g' B, \1 _0 J) ]
  22. .ClassifyImages li:nth-child(4),.ClassifyImages li:nth-child(5),.ClassifyImages li:nth-child(6){margin-top:10px}% r$ w! _  i2 O! D" ~
  23. .ClassifyImages li img{width:100%;display:block}
    : Z# @/ ?% u7 `7 K0 T1 b
  24. </style>
    ) O# |& s, {( O8 [, N8 H
  25. <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>) m% Y3 |7 @" L
  26. </head>
    ) d0 T# y' x4 t7 Y0 ~) j
  27. <body>
    7 a, N. b& z; Y# R4 W+ q
  28. <div class="Classify">. O1 z  t' y3 {  s
  29.         <div class="ClassifyH">主题展会
    0 N! U$ K' e8 _1 ~* w
  30.                 <ul class="ClassifyNav">  q: @' b$ I5 y9 N+ P( V9 I
  31.                         <li class="active">健康与美容</li>
    4 }# q& D, z6 D! i  {' B/ o
  32.                         <li>女性时尚</li>
    - B+ K" O" h) D# ]) M" x: o
  33.                         <li>母婴用品</li>- `! v9 U$ j! e) E" L
  34.                         <li>家庭与厨房</li>4 v" S. m+ f$ l4 M
  35.                         <li>新娘礼服与婚纱</li>
    ; J6 p/ E+ f3 c3 s# K
  36.                         <li>职业与教育</li>& T% s3 ^  O% Y# O% o0 Z* q0 F
  37.                         <li>银行与金融</li>* ?/ X: B, {' ^9 b! j
  38.                         <li>相关产品</li>( e* s( ?% \: y
  39.                 </ul>
    . ]/ ^+ z$ I& ?7 l
  40.         </div>- @" c1 }7 {) F$ o. ?; f2 P( c
  41.         <div class="ClassifyMain">) N3 ?8 K/ G" t! @/ l
  42.                 <div class="ClassifyBox show">+ A, H8 D) C3 x* {$ M
  43.                         <div class="ClassifyContent">
      U' |" s7 B8 s6 \
  44.                                 <div class="ClassifyContentH">健康与美容</div>
    7 D5 @2 {, W4 |2 i4 g* @
  45.                                 <div class="ClassifyContentInfo">健康的标准、影响健康的因素;亚健康的基本概念、主要表现、出现亚健康的原因、从健康到亚健康再到疾病的发展过程以及自我检测的方法、维护健康的基本原则和措施;介绍了人的一生各个时期的生理特点、心理特点及其注意事项、优生优育,预防先天性畸形的基本常识</div>
    8 U9 `) I5 s6 F6 G
  46.                         </div>
    5 \/ j  `4 C" K0 V% H
  47.                         <ul class="ClassifyImages">
    / Y. j$ d' J1 g5 `% o' E' \
  48.                                 <li><img src="pic/classify.jpg"/></li>
    9 I9 u) M) R  M. Q- R& r$ f
  49.                                 <li><img src="pic/classify.jpg"/></li>6 A0 W# w0 t+ X; \: Y% a6 @1 e( `
  50.                                 <li><img src="pic/classify.jpg"/></li>8 Q) u; ?* P) _0 {
  51.                                 <li><img src="pic/classify.jpg"/></li>
    $ A1 A9 O: Z7 Z5 m9 x5 {
  52.                                 <li><img src="pic/classify.jpg"/></li>$ {* l" {- Y" a! d* P# U( d; V. Z
  53.                                 <li><img src="pic/classify.jpg"/></li>
    ) n) c1 S, L2 P! t" D2 v5 }+ H
  54.                         </ul>2 Z8 C8 v; P( i% J4 A  I
  55.                 </div>
    4 [  |% [. g: `
  56.                 <div class="ClassifyBox">7 f1 S0 L' I* ^8 H* D0 _% v1 G
  57.                         <div class="ClassifyContent">
    : R8 v: C$ |+ `' f
  58.                                 <div class="ClassifyContentH">女性时尚</div>1 b: X3 b2 l" v1 i
  59.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>: O" a% c( G. k) [7 E
  60.                         </div>9 c0 {' D' t2 A8 P# z
  61.                         <ul class="ClassifyImages">8 z0 I3 o3 k- t( t( g
  62.                                 <li><img src="pic/classify.jpg"/></li>
    2 ]1 @' @# O/ n9 \, h. a/ {: P. z
  63.                                 <li><img src="pic/classify.jpg"/></li>
    . B0 r- o. y/ U8 H4 P4 l
  64.                                 <li><img src="pic/classify.jpg"/></li>( b8 y- A8 V7 W4 v: t% \
  65.                                 <li><img src="pic/classify.jpg"/></li>5 t, w4 D/ A- s2 ~; x9 P
  66.                                 <li><img src="pic/classify.jpg"/></li>
    # Q! i( Z) I' V# d
  67.                                 <li><img src="pic/classify.jpg"/></li>
    % A9 d2 L) j8 P, p# d& S8 @* |/ g
  68.                         </ul>
    1 d3 m0 H& [! f
  69.                 </div>& [8 g) }& w+ Q+ x
  70.                 <div class="ClassifyBox">
    * \: G0 h0 `4 R/ Z
  71.                         <div class="ClassifyContent">
    9 l4 @4 t3 B3 ?, N. x5 L1 `$ X
  72.                                 <div class="ClassifyContentH">母婴用品</div>
    ! N8 S. J. X. q- u1 c
  73.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>; E  B7 L' o, ?" E, H( l# y' |
  74.                         </div>/ T' q7 ~& ], B# Y4 m7 j  b
  75.                         <ul class="ClassifyImages">/ W7 C3 F9 }' |, {0 e) z
  76.                                 <li><img src="pic/classify.jpg"/></li>
    / u$ C: C! o7 n! U! }
  77.                                 <li><img src="pic/classify.jpg"/></li>
    - Q. `! z4 L7 W
  78.                                 <li><img src="pic/classify.jpg"/></li>- v# z6 G% I7 `; \5 W! U$ K5 H
  79.                                 <li><img src="pic/classify.jpg"/></li>
    & |6 z7 P6 N0 E0 C8 C. f
  80.                                 <li><img src="pic/classify.jpg"/></li>$ R7 {. N; d. R& c/ Z
  81.                                 <li><img src="pic/classify.jpg"/></li>% k* u& ?; Q' s" R
  82.                         </ul>
    5 {* j7 N; F/ D/ j
  83.                 </div>  `7 b1 n# r( U% k# A+ D- l
  84.                 <div class="ClassifyBox">
    1 V) M6 i; P( f) a  L" t
  85.                         <div class="ClassifyContent">$ e+ {  X/ w" P; {
  86.                                 <div class="ClassifyContentH">家庭与厨房</div>
    6 x, S0 Q! _; N8 u. {' B
  87.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    ! L4 k0 I1 N9 [1 M9 f+ C
  88.                         </div>7 a) e; r- r/ s
  89.                         <ul class="ClassifyImages">6 r' M0 N7 i4 x+ p1 o& v( g
  90.                                 <li><img src="pic/classify.jpg"/></li>
    5 r; Q, M9 U$ d% j8 b- S1 {5 Y. M
  91.                                 <li><img src="pic/classify.jpg"/></li>* U7 p9 F4 M- L0 w- j; ]
  92.                                 <li><img src="pic/classify.jpg"/></li>
    7 z' U4 V! W2 F6 U" a# c
  93.                                 <li><img src="pic/classify.jpg"/></li>& ]' y9 Y" @/ ~1 \+ D5 M
  94.                                 <li><img src="pic/classify.jpg"/></li>, [% S( b5 r! O0 k' d9 j$ D
  95.                                 <li><img src="pic/classify.jpg"/></li>  ^/ z0 [. E6 S" j. o
  96.                         </ul>
    ( q4 A% z, d' ]/ D9 ~3 f" w
  97.                 </div>/ i  N3 Y( w$ Y9 ]% G
  98.                 <div class="ClassifyBox">
    0 m5 _1 i$ z6 s  |5 Z
  99.                         <div class="ClassifyContent">
    5 K. P/ c# r* Y: H2 m9 S, O( Z
  100.                                 <div class="ClassifyContentH">新娘礼服与婚纱</div>7 g# g; N$ P8 v2 u. k( t- \+ K; I
  101.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    $ s5 h) O0 b3 B3 a7 P- q$ A# y
  102.                         </div>
    3 x: T3 C- B. _; K% ?% w9 l
  103.                         <ul class="ClassifyImages">4 U5 J1 H0 ?" t2 Y! X
  104.                                 <li><img src="pic/classify.jpg"/></li>$ w: y0 S% ?: K/ J
  105.                                 <li><img src="pic/classify.jpg"/></li>7 r+ {1 C# Y* e1 N
  106.                                 <li><img src="pic/classify.jpg"/></li>8 v1 t, |- ?0 n* A( R% G
  107.                                 <li><img src="pic/classify.jpg"/></li>+ n, O3 d& ~# Q6 j: n- S$ [& G3 @
  108.                                 <li><img src="pic/classify.jpg"/></li>
    ! z$ h) w4 c. ^5 b. Y* M, n( {& n
  109.                                 <li><img src="pic/classify.jpg"/></li>0 j' j  T6 p7 t1 P8 V/ n- w
  110.                         </ul>& i# Q. d6 a3 ^) F3 N+ B! S# s
  111.                 </div>( U; L- }0 A6 d) ?- I
  112.                 <div class="ClassifyBox">
    ; {% ]4 [/ U7 q& C& \# Z1 n% S
  113.                         <div class="ClassifyContent">& N3 g& |: H$ f
  114.                                 <div class="ClassifyContentH">职业与教育</div>
    - n/ Z5 L% t/ m' z, q/ z/ c
  115.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>* S  K/ i, q+ C6 l1 K% V
  116.                         </div>) ^7 h6 j" g- G
  117.                         <ul class="ClassifyImages">) L1 s: ?, Y/ `2 u0 t* {
  118.                                 <li><img src="pic/classify.jpg"/></li>
    + p& k8 s5 a1 h3 e' n
  119.                                 <li><img src="pic/classify.jpg"/></li>; i) C1 R4 K+ I! U0 g2 m+ p& [
  120.                                 <li><img src="pic/classify.jpg"/></li>
    $ Z% G% [4 X0 p; I! w  B; @% E
  121.                                 <li><img src="pic/classify.jpg"/></li>
    ; P4 a2 V' S; C8 J: |
  122.                                 <li><img src="pic/classify.jpg"/></li>) i  y6 n8 M# f/ k5 B/ V
  123.                                 <li><img src="pic/classify.jpg"/></li>
    4 H; M3 I* S# u
  124.                         </ul>: E. N0 u! K' ]
  125.                 </div>6 T( n* ?* o' f* N7 _! i. U/ V
  126.                 <div class="ClassifyBox">7 L* z7 o6 q8 C9 N
  127.                         <div class="ClassifyContent">; T2 E/ X! c: n% \" }# j
  128.                                 <div class="ClassifyContentH">银行与金融</div>
    . B- u- g; T) |
  129.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    2 }; d) d: Q0 S9 j  W" C/ t
  130.                         </div>* e3 Q! P; ], ]& t  F: O
  131.                         <ul class="ClassifyImages">& c$ A# U8 V3 S! p& g+ a' f
  132.                                 <li><img src="pic/classify.jpg"/></li>" D9 e+ e% @9 X" H: {' G
  133.                                 <li><img src="pic/classify.jpg"/></li>
    4 K* u7 l  s& _* G" d
  134.                                 <li><img src="pic/classify.jpg"/></li>6 z9 `# U0 P# v% |5 \  [, h6 u
  135.                                 <li><img src="pic/classify.jpg"/></li>
    : z  c. j# ?% f- \( y% z
  136.                                 <li><img src="pic/classify.jpg"/></li>1 A4 w$ d2 [* q! T% ^8 X" u4 \
  137.                                 <li><img src="pic/classify.jpg"/></li>% h3 }! {. u* J& E
  138.                         </ul>
    ( x$ P2 C3 f) u6 _# U' ^2 I# q$ R/ S& U
  139.                 </div>
    2 {9 U* H4 g7 W  h6 _
  140.                 <div class="ClassifyBox">
    7 `( W) _- n& N% ^+ D) m
  141.                         <div class="ClassifyContent">
    2 ]! w5 C. w9 _
  142.                                 <div class="ClassifyContentH">相关产品</div>
    . R! i+ P7 h; U0 J% j  ~) P
  143.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>/ g& Z; T3 e3 y* b
  144.                         </div>9 I8 J9 {9 H0 B/ y/ D
  145.                         <ul class="ClassifyImages">
    / ~, X; F7 \) O/ B- g$ N
  146.                                 <li><img src="pic/classify.jpg"/></li>
    ! O# L' D1 S" d) g' I
  147.                                 <li><img src="pic/classify.jpg"/></li>- f& B, |% T$ i& ^' }
  148.                                 <li><img src="pic/classify.jpg"/></li>9 m4 [( ~$ ?3 y( U2 F: B
  149.                                 <li><img src="pic/classify.jpg"/></li>
    ( h+ p5 p4 \/ D9 b. ?- V
  150.                                 <li><img src="pic/classify.jpg"/></li>
    3 c, F. [: q3 \4 N' \: h
  151.                                 <li><img src="pic/classify.jpg"/></li>
    ) i4 M! x/ }6 q) G
  152.                         </ul>% G- H- C/ z: q$ p; W
  153.                 </div>
    / b- t* P) x' A& ~% v# K
  154.         </div>
    + J( ~5 R2 N' e
  155. </div>2 ?4 y& P# Y% [& m3 w4 p$ A
  156. <script>2 V+ a$ A7 I& b- |' v) Q) f/ j& u- w9 r( j
  157. //展会分类切换
    , E) C# G9 [8 Q
  158. $(function(){               
    8 F* d8 [. ^; w  S( d
  159.         $('.ClassifyNav li').mouseover(function(){# |% H; e$ x5 w* R' s$ m# K! P. D4 W/ z
  160.                 var liindex = $('.ClassifyNav li').index(this);- @  C- t) t' q
  161.                 $(this).addClass('active').siblings().removeClass('active');
    7 R! X- g0 {- m2 F8 @3 k
  162.                 $('.ClassifyBox').eq(liindex).fadeIn(150).siblings('.ClassifyBox').hide();* H2 [" W( P4 m5 C/ r
  163.                 var liWidth = $('.ClassifyNav li').width();
    % B! ^  R6 b/ |+ d
  164.                 $('.ClassifyNav p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
    5 y9 ?4 t8 [0 q/ j$ |
  165.         });
    " n' z4 o% x& W' P) w
  166. });4 j: p- W' W2 O
  167. </script>
    ' k  J( j1 m* P  i: |
  168. </body>, {3 I. [* g, }* a7 a; F+ y) e' c7 f
  169. </html>
复制代码

! q& X0 t6 q! D& [- N
( N9 y+ q1 Q* r* L2 z& g9 K8 F

0

主题

3

帖子

4

积分

1°伸手党

Rank: 2

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

使用道具 举报

网站简介

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