jQuery实现的多滑动门，多选项卡效果代码

本文实例讲述了jQuery实现的多滑动门，多选项卡效果。分享给大家供大家参考，具体如下：
运行效果截图如下：

具体代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script language="javascript" src="jquery-1.4.2.min.js"></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>超多滑动门效果</title><style type="text/css">* {margin:0;padding:0;}body {font-size:12px;}ul, li {list-style-type:none;}#tab {width:500px;height:200px;margin:20px auto;overflow:hidden;}#tab .tab_title {width:500px;height:22px;overflow:hidden;left:0;top:0;clear:both;overflow:hidden;position:relative;}#tab .tab_title .u {width:465px;overflow:hidden;position:relative;}#tab .tab_title ul {margin:0 5px;position:absolute;float:left;width:2784px;/*这个即是滑动门的总长度！就是所有的li的宽度加上间距！计算本案例中的宽度即为：24*100+14*24+24*2（2为边框宽度）=2784 */}#tab .tab_title div {float:left;width:15px;height:20px;line-height:20px;cursor:pointer;}#tab .tab_title span.vright {top:0;right:5px;margin-left:2px;}#tab .tab_title span.vleft {top:0;left:0px;padding-left:5px;}#tab .tab_title li {float:left;width:100px;/*这个的宽度即是四个滑动门栏目的宽度*/height:20px;line-height:20px;text-align:center;background-color:#cccccc;margin-right:14px;border:1px #999999 solid;cursor:pointer;}#tab .tab_title li:hover {background-color:#999999}#tab .tab_title li.selected {background-color:#666666;}#tab .tab_content {width:476px;height:156px;overflow:hidden;padding:10px;border:1px #CCCCCC solid;}#tab .tab_content div {border:1px #999999 dotted;}#tab .tab_content div p {line-height:1.5;text-indent:25px;color:#333333;}#tab .tab_content .none {display:none;}#div1 {border:1px #CCCCCC solid;position:absolute;display:none;background:#EEF7EE;font-size:12px;padding:5px;color:#999999;}#div2 {width:120px;height:15px;border:1px #CCCCCC solid;position:absolute;display:none;background:#CCCCCC;font-size:5px;padding:2px;color:#999999;}</style><script language="javascript"> $（function（）{ var index = 0; $（".tab_title ul li"）.click（function（）{index = $（".tab_title ul li"）.index（this）;$（this）.addClass（"selected"）.siblings（）.removeClass（"selected"）;$（".tab_content div"）.eq（index）.show（）.siblings（）.hide（）; }）; var i = 4; //这个前端展示几个滑动门栏目 var len = $（".u .scrol li"）.length; var page = 1; var maxpage = Math.ceil（len/i）; var scrollWidth = $（".u"）.width（）; var divbox = "<div id="div1" >呵呵，没有了</div>"; $（"body"）.append（divbox）; $（".vright"）.click（function（e）{if（！$（".u .scrol"）.is（":animated"））{if（page == maxpage ）{$（".u .scrol"）.stop（）;$（"#div1"）.css（{ "top": （e.pageY + 20） +"px", "left": （e.pageX + 20） +"px", "opacity": "0.9"}）.stop（true,false）.fadeIn（800）.fadeOut（800）;}else{$（".u .scrol"）.animate（{left : "-=" + scrollWidth +"px"},2000）;page++;}} }）; $（".vleft"）.click（function（）{ if（！$（".u .scrol"）.is（":animated"））{if（page == 1）{$（".u .scrol"）.stop（）;}else{$（".u .scrol"）.animate（{left : "+=" + scrollWidth +"px"},2000）;page--;}} }）; }）;</script></head><body><div id="tab"> <div class="tab_title"><div class="vleft"><strong><<</strong></div><div class="u"> <ul class="scrol"><li class="selected">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li> </ul></div><div class="vright"><strong>>></strong></div> </div> <div class="tab_content"><div> <p>1的内容</p></div><div class="none"> <p>2的内容</p></div><div class="none"> <p>3的内容</p></div><div class="none"> <p>4的内容</p></div><div class="none"> <p>5的内容</p></div><div class="none"> <p>6的内容</p></div><div class="none"> <p>7的内容</p></div><div class="none"> <p>8的内容</p></div><div class="none"> <p>9的内容</p></div><div class="none"> <p>10的内容</p></div><div class="none"> <p>10的内容</p></div><div class="none"> <p>12的内容</p></div><div class="none"> <p>13的内容</p></div><div class="none"> <p>14的内容</p></div><div class="none"> <p>15的内容</p></div><div class="none"> <p>16的内容</p></div><div class="none"> <p>17的内容</p></div><div class="none"> <p>18的内容</p></div><div class="none"> <p>19的内容</p></div><div class="none"> <p>20的内容</p></div><div class="none"> <p>21的内容</p></div><div class="none"> <p>22的内容</p></div><div class="none"> <p>23的内容</p></div><div class="none"> <p>24的内容</p></div> </div></div></body></html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。