9顶

非常酷的左右无间隙文字切换选项卡特效代码

稿源：互联网 2018-09-03 02:29:10 点击： 5258 撤稿纠错

代码简单实用，简洁明了，实现无缝切换。

以下讨论的是和jQuery 无间隙切换选项卡相关的非常酷的左右无间隙文字切换选项卡特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dome tabs</title>
<script type="text/javascript" src="http://www.alixixi.com/script/jquery-1.8.3.min.js"></script>
<style>.tabs{width: 1200px; margin: 0 auto; height: 336px; overflow: hidden;}
.tabs_item{height: 36px;}
.tabs_block{height: 300px;}
.list_item{float: left; width: 200px; height: 36px; line-height: 36px; font-size: 26px; text-align: center;}
.list_item.active{color: #E9914F;}
.tabs_block{width: 20000px; position: relative;}
.list_block{display: none; float: left; width: 1200px; height: 300px; font-size: 100px; text-align: center; line-height: 300px;}
.list_block.show{display: block;}</style>
       <script>jQuery.easing['easeOutCubic'] = function (x, t, b, c, d) {
 return c*((t=t/d-1)*t*t + 1) + b;
};
function Tabs(tabs,list,block,item,$){
 var tabs  = $(tabs);
 var width = tabs.width();
 tabs.find(list+':first').addClass('active');
 tabs.find(item+':first').addClass('show');
 tabs.find(list).click(function(){
  var $this = $(this);
  var i = tabs.find(block).find('.show').index();
  var n = $this.index();
  $this.addClass('active').siblings('.active').removeClass('active');
  tabs.find(item).eq(n).addClass('show');
  if(n > i){
   tabs.find(block).stop().animate({'left':'-'+width+'px'},600,'easeOutCubic',function(){
    tabs.find(block).css('left','0px');
    tabs.find(item).eq(n).siblings('.show').removeClass('show');
   });
  }else{
   tabs.find(block).css('left','-'+width+'px').stop().animate({'left':0},600,'easeOutCubic',function(){
    tabs.find(item).eq(n).siblings('.show').removeClass('show');
   });
  }
 });
}
</script>
</head>

<body>
 <div class="tabs">
  <div class="tabs_item">
   <div class="list_item">list item 1</div>
   <div class="list_item">list item 2</div>
   <div class="list_item">list item 3</div>
   <div class="list_item">list item 4</div>
   <div class="list_item">list item 5</div>
   <div class="list_item">list item 6</div>
  </div>
  <div class="clear"> </div>
  <div class="tabs_block">
   <div class="list_block">list block 1</div>
   <div class="list_block">list block 2</div>
   <div class="list_block">list block 3</div>
   <div class="list_block">list block 4</div>
   <div class="list_block">list block 5</div>
   <div class="list_block">list block 6</div>
  </div>
 </div>
<script type="text/javascript">
 jQuery(document).ready(function(){
    var myTabs = new Tabs('.tabs','.list_item','.tabs_block','.list_block',jQuery);
 });
</script>
</body>
</html>

关于非常酷的左右无间隙文字切换选项卡特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090394467.shtml方便下次再访问哦。

·上一篇： 使用canvas画一个雷达效果图的特效代码
·下一篇： JQUERY实现的简单按钮轮换选中特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

非常酷的左右无间隙文字切换选项卡特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻