JS实现标签滚动切换效果-偶像资源网

本文的JS效果是在鼠标点击ITEM标签的时候，实现下方的内容跟随滚动切换的效果，我们先来看下运行后的效果图。

以下是原创的运行代码：

<!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>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<title>jQuery实现的平滑滚动选项卡</title>
<script type=\"text/javascript\" src=\"http://libs.baidu.com/jquery/2.0.0/jquery.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;background-color:#FC0;cursor: pointer;}
.list_item.active{color: #FFF;background-color:#F60}
.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;background-color:#F4F4F4}
.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>
<p style=\"text-align:center\">更多代码请访问：<a href=\"https://www.freexyz.cn\" target=\"_blank\"></a></p>
</body>
</html>

在代码中我们引用了百度的jquery

<script type=\"text/javascript\" src=\"http://libs.baidu.com/jquery/2.0.0/jquery.min.js\"></script>

需要的朋友跟着学习下吧，感谢你对的支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

JS实现标签滚动切换效果

请登录后发表评论