首页 > 代码库 > JQuery中Table标签页和无缝滚动
JQuery中Table标签页和无缝滚动
HTML代码：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://www.mamicode.com/css/tab1.css" /> <script src="http://www.mamicode.com/js/jquery.js"></script> <script src="http://www.mamicode.com/js/tab1.js"></script> </head> <body> <div class="tabTitle"> <ul> <li class="current0">xhtml</li> <li>css</li> <li>jquery</li> </ul> </div> <div class="tabContent"> <div>xhtml的内容</div> <div class="hide">css的内容</div> <div class="hide">jquery的内容</div> </div> </body></html>
CSS的代码：
*{ padding: 0; margin: 0;}li{ list-style-type: none;}body{ margin: 50px;}.hide{ display: none;}.tabTitle ul{ overflow: hidden; _height:1px;}.tabTitle ul li{ float: left; border: 1px solid #abcdef; border-bottom: none; height: 30px; line-height: 30px; padding:0 15px; margin-right: 3px; cursor: pointer;}.current0{ background: #abcdef; color: #FF6600;}.current1{ background: red; color: teal;}.current2{ background: green; color: yellow;}.tabContent div{ border: 1px solid #f60; width: 300px; height: 250px; padding: 15;}js代码：
$(function(){ var ali=$(‘.tabTitle ul li‘); var aDiv=$(‘.tabContent div‘); var timeId=null; ali.mouseover(function(){ //this 定义成匿名函数 var _this=$(this); //$(this)方法属于哪个元素，$(this)就是指哪个元素 //siblings 除了选中的兄弟元素 //setTimeout()： 延迟某一段代码的执行 timeId=setTimeout(function(){ //_this.addClass(‘current‘).siblings().removeClass(‘current‘); _this.addClass(function(){ return ‘current‘+_this.index(); }).siblings().removeClass(); var index=_this.index(); //如果想用一组元素控制另外一组元素的显示或者隐藏，需要用到索引 aDiv.eq(index).show().siblings().hide(); },500); //鼠标移出时清除定时器 }).mouseout(function(){ //clearTimeout 的作用是清除定时器 clearTimeout(timeId); });});效果：
无缝滚动HTML：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="http://www.mamicode.com/css/hider.css" /> <script src="http://www.mamicode.com/js/jquery.js"></script> <script src="http://www.mamicode.com/js/slider.js"></script> </head> <body> <a href="javascript:;" class="goLeft">向左走</a> <a href="javascript:;" class="goRight">向右走</a> <div class="warp"> <ul> <li><img src="http://www.mamicode.com/img/1.jpg" ></li> <li><img src="http://www.mamicode.com/img/2.jpg" ></li> <li><img src="http://www.mamicode.com/img/3.jpg" ></li> <li><img src="http://www.mamicode.com/img/4.jpg" ></li> <li><img src="http://www.mamicode.com/img/5.jpg" ></li> </ul> </div> </body></html>
CSS代码：
*{ padding: 0; margin: 0;}li{ list-style-type:none;}body{ margin: 50px;}.warp{ border: 3px solid #f00; width: 800px; height: 200px; position: relative; overflow: hidden;}.warp ul{ overflow: hidden; width: 1600px; position: absolute; left: 0; top:0; _height:1px;}.warp ul li{ float: left;}js代码：
//如果想使一个元素运动起来，一般情况下这个元素必须要具有与position属性$(function(){ var oul=$(‘.warp ul‘); var oulHtml=oul.html(); oul.html(oulHtml+oulHtml); var timeId=null; var ali=$(‘.warp ul li‘); //或缺li的寬度 var aliWidth=ali.eq(0).width(); //或缺大小 var aliSize=ali.size(); var ulWidth=aliWidth*aliSize; oul.width(ulWidth); var speed=2; function slider(){ if(speed<0) { if(oul.css(‘left‘)==-ulWidth/2+‘px‘) { oul.css(‘left‘,0); } oul.css(‘left‘,‘+=-2px‘); } if(speed>0){ if(oul.css(‘left‘)==‘0px‘) { oul.css(‘left‘,-ulWidth/2+‘px‘); } oul.css(‘left‘,‘+=‘+speed+‘px‘); } } //setInterval()函数的作用，每个一段时间执行该函数的代码 timeId=setInterval(slider,30); $(‘.warp‘).mouseover(function(){ //clearInterval() 清除定时器 clearInterval(timeId); }); $(‘.warp‘).mouseout(function(){ timeId=setInterval(slider,30); }); $(‘.goLeft‘).click(function(){ speed=-2; }); $(‘.goRight‘).click(function(){ speed=+2; }); });效果：
JQuery中Table标签页和无缝滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。