JS实现标签滚动切换效果


Posted in Javascript onDecember 25, 2017

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

JS实现标签滚动切换效果

以下是三水点靠木原创的运行代码:

<!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://3water.com" target="_blank">三水点靠木</a></p>
</body>
</html>

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

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

需要的朋友跟着学习下吧,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
JavaScript设计模式初探
Jan 07 Javascript
详解iframe与frame的区别
Jan 13 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
html实现随机点名器的示例代码
Apr 02 Javascript
JS实现图片居中悬浮效果
Dec 25 #Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 #Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 #Javascript
微信小程序录音与播放录音功能
Dec 25 #Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 #Javascript
VueRouter导航守卫用法详解
Dec 25 #Javascript
基于zTree树形菜单的使用实例
Dec 25 #Javascript
You might like
php递归调用删除数组空值元素的方法
2015/04/28 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
ExtJS 入门
2010/10/29 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python常用内置函数总结
2015/02/08 Python
Python字符串替换实例分析
2015/05/11 Python
Python功能键的读取方法
2015/05/28 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
python中数据库like模糊查询方式
2020/03/02 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
项目开发计划书
2014/01/09 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
双创工作实施方案
2014/03/26 职场文书
生日寄语大全
2014/04/08 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技