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

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

0
回复
1692
查看
[复制链接]

690

主题

704

帖子

3万

积分

董事

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

积分
31813
     紫钻仅向指定用户开放  
发表于 19-5-30 18:06:54 | 显示全部楼层 |阅读模式
一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果一个JS导航鼠标悬停切换效果完整代码:
3 O0 |3 s0 R2 w" E* I+ d: |
  1. <!doctype html>
      P2 O0 U( d+ N7 L4 ^
  2. <html>
    ; W) @% O4 L5 W6 v4 p
  3. <head>
    $ E9 u) G2 p( H0 p' h. k
  4. <style>
    2 U; k1 F, ?! I! L& E7 B% Q) X; e- p, N
  5. *{padding:0; margin:0;border:0}
    9 q: m, t2 o! g& R) p
  6. li{list-style:none}" _$ y2 h& f+ y

  7. & Q$ x2 D2 `5 n* {6 `! J
  8. 4 q0 ^; N) R/ O& E
  9. .Classify{width:1200px;margin:0 auto}
    / P8 o: ~: p- x2 [
  10. .ClassifyH{width:100%;height:50px;position:relative;font:24px/50px 'microsoft yahei';border-bottom:2px solid #eee}
    4 K. l5 M9 H$ v5 ^& z
  11. .ClassifyNav{position:absolute;bottom:0;right:0;height:40px;font:16px/40px 'microsoft yahei'}( s# @3 q6 R4 r, _. {; B- O
  12. .ClassifyNav>li{float:left;margin-left:10px;cursor:pointer}9 [0 V) P6 i$ U6 u( N0 L+ n# H- u( f
  13. .ClassifyNav>.active:after{content:"";display:block;width:100%;height:2px;background:#f3006d}1 {, h! _2 V6 K: |- h
  14. .ClassifyMain{width:100%;overflow:hidden;margin-top:20px}. R9 R" m2 [( r
  15. .ClassifyBox{width:100%;overflow:hidden;display:none}
    0 u  A. H) X1 K  Y+ O& o
  16. .ClassifyMain .show{display:block}  `- H  t1 K0 E9 j
  17. .ClassifyContent{width:300px;height:400px;float:left;background:#f8f8f8}
    : S: r5 @  J; g9 r, i, g
  18. .ClassifyContentH{width:100%;height:30px;font:24px/30px 'microsoft yahei';text-align:center;padding-top:50px}$ o( G) r  w6 ~+ K! j- O/ j
  19. .ClassifyContentInfo{padding:20px;height:280px;font:16px/30px arial,'microsoft yahei';text-align:justify}
    4 l* I$ X) y8 Y/ i. u. k
  20. .ClassifyImages{width:890px;height:400px;float:right;justify-content:space-between;display:flex;flex-flow:row wrap}  g: D2 O' O. s6 f! P8 f! c
  21. .ClassifyImages li{width:32.5%}5 i: M" ?: f- j5 j
  22. .ClassifyImages li:nth-child(4),.ClassifyImages li:nth-child(5),.ClassifyImages li:nth-child(6){margin-top:10px}
    8 W- s, X. ?& v$ O  v7 U" E: r6 ]
  23. .ClassifyImages li img{width:100%;display:block}
    4 u& z% ~. k9 U3 ~- i7 K
  24. </style>
    : e1 ?. r) c2 y% c
  25. <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    * p2 n; p4 g  Z- t7 C4 m2 x
  26. </head>: L' o2 \' X$ g- V
  27. <body>
    * }" C" ?; n! e! _% v& K- o8 o2 ^/ j; i
  28. <div class="Classify">; Q+ B0 B; O. L; p2 q4 ?  z/ [
  29.         <div class="ClassifyH">主题展会$ x$ B( N' f$ n6 Y5 j: Y2 H) @$ t
  30.                 <ul class="ClassifyNav">
    + F7 m- v/ f6 }, t; U
  31.                         <li class="active">健康与美容</li>5 h9 L4 Y8 c7 E
  32.                         <li>女性时尚</li>
    8 E/ w1 Q. v5 Z6 F" L5 P9 q% Q
  33.                         <li>母婴用品</li>
    ! c# E" K8 Q8 a' M, E6 W( \- \, S4 k
  34.                         <li>家庭与厨房</li>
    + |8 e. j$ J$ f( D# a" Z
  35.                         <li>新娘礼服与婚纱</li>$ z+ n+ _+ E7 O) @, j
  36.                         <li>职业与教育</li>
    + _) z0 P$ c( L9 ]) w2 }$ x
  37.                         <li>银行与金融</li>
    ' ^! Q* V  X3 P8 R; {  O
  38.                         <li>相关产品</li>4 `9 H, G4 p" J) `; I, H
  39.                 </ul>. c0 {7 F. }- x5 r
  40.         </div>
    & j8 _* a' t/ ]5 i. ^7 A4 S8 O
  41.         <div class="ClassifyMain">
    2 i/ F8 F& ^- c$ X# X
  42.                 <div class="ClassifyBox show">
    7 o: D, F# c8 x5 \: m) L3 ^2 Q. V
  43.                         <div class="ClassifyContent">
    . \* J) p7 q& t1 J# K6 v
  44.                                 <div class="ClassifyContentH">健康与美容</div>- S5 B  S& W$ M$ y! b# b+ a& N6 e0 v
  45.                                 <div class="ClassifyContentInfo">健康的标准、影响健康的因素;亚健康的基本概念、主要表现、出现亚健康的原因、从健康到亚健康再到疾病的发展过程以及自我检测的方法、维护健康的基本原则和措施;介绍了人的一生各个时期的生理特点、心理特点及其注意事项、优生优育,预防先天性畸形的基本常识</div>' K; q  P1 s1 ^1 h' {
  46.                         </div>
    ' K% t3 [- ?; Z9 c2 x' z
  47.                         <ul class="ClassifyImages">
    ) n7 i" i" T; [: G1 s8 i
  48.                                 <li><img src="pic/classify.jpg"/></li>
    3 ]- \: v, L0 Y# o
  49.                                 <li><img src="pic/classify.jpg"/></li>
    1 {! e8 T% v5 r5 a4 z, {. K
  50.                                 <li><img src="pic/classify.jpg"/></li>
    : n3 b0 b9 S9 V" I+ D' r7 ]- ], {
  51.                                 <li><img src="pic/classify.jpg"/></li>) z/ v) s2 I7 f7 o
  52.                                 <li><img src="pic/classify.jpg"/></li>" c2 w# t+ O  l  T
  53.                                 <li><img src="pic/classify.jpg"/></li>6 w- i- ^0 ~! l2 b& B7 k3 @% L
  54.                         </ul>
    9 ~, X1 x, ~- x0 d( v6 _! l6 @
  55.                 </div>% G$ M) A; z1 l/ ~
  56.                 <div class="ClassifyBox">
    ( g$ A# h1 D& }* c  i' i
  57.                         <div class="ClassifyContent">0 x8 A0 T; r) Q( {
  58.                                 <div class="ClassifyContentH">女性时尚</div>5 ]% Y% A. H9 M1 o, k2 f4 p* c
  59.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>* M8 V' e; E  r# ^" N
  60.                         </div>
    , `4 ^* B+ m1 z/ W' B" U' [
  61.                         <ul class="ClassifyImages">
    . c2 W6 m3 _8 F4 [3 ~' t" g
  62.                                 <li><img src="pic/classify.jpg"/></li>/ d- f2 j# P; i' N  n
  63.                                 <li><img src="pic/classify.jpg"/></li>
    % L0 h. N% f9 n$ P/ q9 w4 }
  64.                                 <li><img src="pic/classify.jpg"/></li>
    , P; |) F9 b, {
  65.                                 <li><img src="pic/classify.jpg"/></li>0 h" |# n) F: j3 x# w( h1 q2 j
  66.                                 <li><img src="pic/classify.jpg"/></li>
    0 Q* j7 w# {) E: J2 z& w
  67.                                 <li><img src="pic/classify.jpg"/></li>
    , R/ T+ H1 Z3 s4 n, `" G
  68.                         </ul>" F; N# w5 f5 U
  69.                 </div>2 m) R* P* l8 f; B
  70.                 <div class="ClassifyBox">
    ! s2 [+ J8 P, b( K6 E: Q, G
  71.                         <div class="ClassifyContent">4 d& E2 y$ j: B- }, }, M: n& _
  72.                                 <div class="ClassifyContentH">母婴用品</div>
    4 u/ O. P* S. Q" I1 v& c: i1 J
  73.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>0 I' b& S* @, f! r( @. X
  74.                         </div>9 W( E3 @  ]) Z0 o! D3 I& l; d
  75.                         <ul class="ClassifyImages">
    / u; B- c0 Z$ {: {1 U4 @- |
  76.                                 <li><img src="pic/classify.jpg"/></li>% Z  N: J; a3 g: \* `1 q
  77.                                 <li><img src="pic/classify.jpg"/></li>; R+ E! k* L$ b5 B- m
  78.                                 <li><img src="pic/classify.jpg"/></li>
    & Y9 C! t4 Z7 @2 O( {' _
  79.                                 <li><img src="pic/classify.jpg"/></li>
    0 Y& q5 n- b8 Y% o
  80.                                 <li><img src="pic/classify.jpg"/></li>, H4 `# J+ S# F9 {0 ~/ `
  81.                                 <li><img src="pic/classify.jpg"/></li>- i" B$ V: k, }9 w9 Y- H# C
  82.                         </ul>
    - b  H0 G, S* o. D# U9 Q% d* w5 [
  83.                 </div>
    - r/ K1 S8 {: o
  84.                 <div class="ClassifyBox">
    3 u/ [6 Z3 z" z5 F
  85.                         <div class="ClassifyContent">
    ! x( A: ]' T3 t- a3 q
  86.                                 <div class="ClassifyContentH">家庭与厨房</div>
    8 X2 e  ]! X! B' N
  87.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    % h0 H. ?6 P+ S3 a$ G2 E
  88.                         </div>$ N- x- N% {! L, T9 B
  89.                         <ul class="ClassifyImages">) }% v3 A* m5 {
  90.                                 <li><img src="pic/classify.jpg"/></li>1 b: U) c1 h$ M9 Z6 K( k
  91.                                 <li><img src="pic/classify.jpg"/></li>
    : K# |! j. L& S/ B1 T( r
  92.                                 <li><img src="pic/classify.jpg"/></li>5 Y6 V# F2 o8 @$ y
  93.                                 <li><img src="pic/classify.jpg"/></li>
    % z( b5 O. _5 k5 B
  94.                                 <li><img src="pic/classify.jpg"/></li>
    2 b0 P( r% y0 q
  95.                                 <li><img src="pic/classify.jpg"/></li>8 \' ]. H; U* c+ B4 s8 g8 n
  96.                         </ul>
    6 h% i; B9 F' s% D- M: t
  97.                 </div>
      \) J9 v7 I0 e$ D& ~
  98.                 <div class="ClassifyBox">
    ! ~, Y& \7 T6 a
  99.                         <div class="ClassifyContent">  ?& |, _8 {+ _6 i  j
  100.                                 <div class="ClassifyContentH">新娘礼服与婚纱</div>
    5 I" d% _' }3 c) [0 V
  101.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    " b. ^0 U; d, k! G1 A6 i. C
  102.                         </div>
    3 W# n" M! f$ F0 N  F) {
  103.                         <ul class="ClassifyImages">9 e' H' W# ?( q+ d: N
  104.                                 <li><img src="pic/classify.jpg"/></li>; G+ {8 a0 e/ F! m% K# o2 B* ^
  105.                                 <li><img src="pic/classify.jpg"/></li>
    8 m9 ~8 f3 O& L# j
  106.                                 <li><img src="pic/classify.jpg"/></li>9 b$ V' q# X$ J+ v& t6 C7 u  T
  107.                                 <li><img src="pic/classify.jpg"/></li>8 w6 O# U; O2 y5 I- z
  108.                                 <li><img src="pic/classify.jpg"/></li>+ c2 T! w8 e2 ?
  109.                                 <li><img src="pic/classify.jpg"/></li>- K! s( n7 R1 |/ K0 u- s2 L1 V
  110.                         </ul>1 R) U5 s" J* {3 d( d! m
  111.                 </div>7 `/ D1 \& {4 Q( G
  112.                 <div class="ClassifyBox">
    9 h7 t/ U& e* B+ I
  113.                         <div class="ClassifyContent">
    % `9 a( J, A) z# M  Z
  114.                                 <div class="ClassifyContentH">职业与教育</div>: P" @2 S2 W! @
  115.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    2 n: X2 y/ o0 r3 n
  116.                         </div>
    2 d' `: x8 O8 S5 {
  117.                         <ul class="ClassifyImages">. g+ Y, U& }/ O8 g- }
  118.                                 <li><img src="pic/classify.jpg"/></li>/ d' H% E3 m4 H# b7 Y# y
  119.                                 <li><img src="pic/classify.jpg"/></li>
    + |3 |$ L" ]8 a8 x8 u
  120.                                 <li><img src="pic/classify.jpg"/></li>
    ! o7 ?: f& l* h
  121.                                 <li><img src="pic/classify.jpg"/></li>
    - s5 m$ Q( x2 F
  122.                                 <li><img src="pic/classify.jpg"/></li>+ k1 k) I* c# [/ l
  123.                                 <li><img src="pic/classify.jpg"/></li>
    & B' H# G& R: u! }6 T. r
  124.                         </ul>
    8 J+ x: v0 m( [, H& r
  125.                 </div>% o+ x: K! P( B7 q0 ^# s
  126.                 <div class="ClassifyBox">, S. H8 S3 y$ Y! \% M9 g1 ]
  127.                         <div class="ClassifyContent">$ o8 V% M7 g8 @- K' }
  128.                                 <div class="ClassifyContentH">银行与金融</div>% v" d8 E) v" ]6 b+ O
  129.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
    " N  F4 Q/ V) z! j1 w
  130.                         </div>5 ^6 L# R9 `; m7 L6 r; j+ L" |3 a
  131.                         <ul class="ClassifyImages">
    " B' }! P  p2 C% N; g9 m
  132.                                 <li><img src="pic/classify.jpg"/></li>
    # [: I9 G- p$ Y' V
  133.                                 <li><img src="pic/classify.jpg"/></li>* D5 e2 K2 s* t! `
  134.                                 <li><img src="pic/classify.jpg"/></li>6 l9 a1 L; [4 ]  U
  135.                                 <li><img src="pic/classify.jpg"/></li># {8 e7 R1 B& }" V! ^; a( p, K
  136.                                 <li><img src="pic/classify.jpg"/></li>
    ; v+ M8 B) I2 F8 F  h
  137.                                 <li><img src="pic/classify.jpg"/></li>
    , f" I* D* e  u0 J3 T
  138.                         </ul>1 n) O) s- M0 J# e/ f- l. v
  139.                 </div># K- t3 N' _) z" b' X9 s
  140.                 <div class="ClassifyBox">
    2 J; ]" S, L. e; O/ _* {' U, x) u( c
  141.                         <div class="ClassifyContent">: T$ _' a1 g& T2 Y+ L# b
  142.                                 <div class="ClassifyContentH">相关产品</div>
    * R5 \5 V. `0 Z/ S8 o' l% E
  143.                                 <div class="ClassifyContentInfo">女性时尚(Women's fashion) ,简单地说,顾名思义,女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上,也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面,如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>) G, f) ^) y8 G7 Y& i
  144.                         </div>0 R6 X% W# n- n; {3 l
  145.                         <ul class="ClassifyImages">
    ; w; G  ~8 t. D3 T2 z
  146.                                 <li><img src="pic/classify.jpg"/></li>
    7 M3 c6 Q* U2 a% Z
  147.                                 <li><img src="pic/classify.jpg"/></li>
    + @; `! s6 k8 \- s1 N7 S
  148.                                 <li><img src="pic/classify.jpg"/></li>
    - g* g9 Z5 M/ W: U
  149.                                 <li><img src="pic/classify.jpg"/></li>2 `' d  [  A$ i  `9 I, x
  150.                                 <li><img src="pic/classify.jpg"/></li>1 z6 b6 ^1 q4 V% U6 o" [
  151.                                 <li><img src="pic/classify.jpg"/></li>; i; N+ m+ w6 B3 Z' T! g
  152.                         </ul>
    / K4 I; K6 |, {! f1 w6 s
  153.                 </div>0 ]3 S6 N4 H: T" e4 D' a' q! p6 |
  154.         </div>
    ( ^3 C9 X. G8 ]/ G* Q9 S* c$ A/ y
  155. </div>
    ; ?4 G; O, j( ~: ^7 L
  156. <script>
    9 y! V9 b/ ?4 w: q9 F
  157. //展会分类切换8 R9 ~2 [% Y0 c0 S# I, e* }
  158. $(function(){                ( R  u9 ^+ I9 }" S- z2 z
  159.         $('.ClassifyNav li').mouseover(function(){
    5 ~1 {. U) t) Y, q/ K+ A# S
  160.                 var liindex = $('.ClassifyNav li').index(this);' f$ s2 V# }) O8 k
  161.                 $(this).addClass('active').siblings().removeClass('active');
    ( A: n: b- @5 c% F- E! f+ A
  162.                 $('.ClassifyBox').eq(liindex).fadeIn(150).siblings('.ClassifyBox').hide();+ x/ G4 s4 \$ M2 }" Y6 p, M
  163.                 var liWidth = $('.ClassifyNav li').width();
    , l# E2 M& Q4 P4 l  |* L
  164.                 $('.ClassifyNav p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
    / J: U! N6 Z# ]% h* x1 s7 H4 W' U" @9 y
  165.         });, g3 w1 F6 {1 D3 g1 A) |
  166. });8 x- C" k/ L( J) `
  167. </script>3 X2 t' ]' \2 b: p( U" F
  168. </body>6 y9 g1 W# n4 ~5 n3 q
  169. </html>
复制代码
1 U4 L/ T7 m6 _" A- |+ A
8 W" t& }: F2 O# J$ \) L

qiuqiufa.com

网站简介

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