老早的时候就想着仿一个百度新闻的滑块效果，但是一直没有时间，趁着今天不忙，赶紧动工。整体没用多长的时间，而且也很简单。先来看一个效果图吧。
首先说一下我的页面结构，最下面的是一个叫做#big_box的div，然后里面有两个元素，一个是小滑块div，一个就是咱们需要显示的数据了，我用的是一个ul，ul里面是li；页面的结构是非常简单的，布局基本上也没有几行代码。这里就不详细的说明了。需要注意的一点就是他们的层级关系要放好。
然后这里用到的jq事件就是mouseenter和mouseleave这两个事件。然后还有一个延时器，是为了不让鼠标在相邻的li中快速切换的时候，造成小滑块的抖动。好像除了这个就没有其他的了。下面直接把代码发出来吧。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>仿百度新闻效果</title> 6 <link rel="stylesheet" type="text/css" href="css/cssReset.css"/> 7 <style type="text/css"> 8 li{ 9 float: left; 10 padding: 0 10px; 11 height: 100%; 12 color: #FFF; 13 line-height: 40px; 14 cursor: pointer; 15 } 16 17 .back_red{ 18 background: rgb(204,0,0); 19 } 20 #big_box{ 21 width: 100%; 22 height: 40px; 23 background: rgb(1,32,79); 24 position: relative; 25 } 26 ul{ 27 margin: 0 auto; 28 height: 40px; 29 z-index: 10; 30 position: absolute; 31 left: 0; 32 top: 0; 33 display: block; 34 } 35 #box{ 36 position: absolute; 37 left: 0; 38 top: 0; 39 height: 40px; 40 width: 52px; 41 background: rgb(204,0,0); 42 z-index: 0; 43 } 44 </style> 45 </head> 46 <body> 47 <div id="big_box"> 48 <div id="box"> 49 50 </div> 51 <ul class="clearfix"> 52 <li class="back_red">首页</li> 53 <li>国内</li> 54 <li>国际</li> 55 <li>军事</li> 56 <li>生活</li> 57 <li>社会</li> 58 <li>娱乐</li> 59 <li>嘿嘿嘿</li> 60 <li>女人</li> 61 <li>房产</li> 62 <li>个性推荐</li> 63 </ul> 64 </div> 65 66 </body> 67 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 68 <script type="text/javascript"> 69 $("li").on("click",function(){ 70 $(this).addClass("back_red").siblings().removeClass("back_red"); 71 }); 72 var enter_li = ''; 73 $("li").on("mouseenter",function(){ 74 var this_ = this; 75 enter_li = setTimeout(function(){ 76 var li_width = $(this_).width()+20; 77 var li_left = 0; 78 for(var i=0;i<$(this_).index();i++){ 79 li_left += Number($("li").eq(i).width()+20); 80 } 81 $("#box").animate({ 82 "width":li_width, 83 "left":li_left 84 },300) 85 },200) 86 87 }) 88 $("li").mouseleave(function(){ 89 clearTimeout(enter_li); 90 }) 91 $("ul").mouseleave(function(){ 92 var li_width = $(".back_red").width()+20; 93 var li_left = 0; 94 for(var i=0;i<$(".back_red").index();i++){ 95 li_left += Number($("li").eq(i).width()+20); 96 } 97 $("#box").animate({ 98 "width":li_width, 99 "left":li_left 100 },400) 101 }) 102 </script> 103 </html>
这里面的cssReset.css是格式化css结构，为了方便大家，也贴在下面了。
1 /* http://meyerweb.com/eric/tools/css/reset/ 2 v2.0 | 20110126 3 License: none (public domain) 4 */ 5 6 html, body, div, span, applet, object, iframe, 7 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 a, abbr, acronym, address, big, cite, code, 9 del, dfn, em, img, ins, kbd, q, s, samp, 10 small, strike, strong, sub, sup, tt, var, 11 b, u, i, center, 12 dl, dt, dd, ol, ul, li, 13 fieldset, form, label, legend, 14 table, caption, tbody, tfoot, thead, tr, th, td, 15 article, aside, canvas, details, embed, 16 figure, figcaption, footer, header, hgroup, 17 menu, nav, output, ruby, section, summary, 18 time, mark, audio, video { 19 margin: 0; 20 padding: 0; 21 border: 0; 22 font-size: 100%; 23 font: inherit; 24 vertical-align: baseline; 25 } 26 /* HTML5 display-role reset for older browsers */ 27 article, aside, details, figcaption, figure, 28 footer, header, hgroup, menu, nav, section { 29 display: block; 30 } 31 body { 32 line-height: 1; 33 } 34 ol, ul { 35 list-style: none; 36 } 37 blockquote, q { 38 quotes: none; 39 } 40 blockquote:before, blockquote:after, 41 q:before, q:after { 42 content: ''; 43 content: none; 44 } 45 table { 46 border-collapse: collapse; 47 border-spacing: 0; 48 } 49 50 .clearfix:after { 51 content: '.'; 52 height: 0; 53 display: block; 54 clear: both; 55 }
好了，这小功能做了半个小时就基本上结束了，主要是学习理清自己的思路，发现问题，并且解决问题。