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 相关文章推荐
JS 统计时间
Mar 09 Javascript
LBS blog sql注射漏洞[All version]-官方已有补丁
Aug 26 Javascript
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
JS前端模块化原理与实现方法详解
Mar 17 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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入门学习知识点三 PHP上传
2011/07/14 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
List Installed Software Features
2007/06/11 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
node跨域请求方法小结
2017/08/25 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
python创建和删除目录的方法
2015/04/29 Python
python爬取指定微信公众号文章
2018/12/20 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
python实现密码强度校验
2020/03/18 Python
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
浙大毕业生自荐信
2014/01/26 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
一年级学生期末评语
2014/04/21 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
师范生小学见习总结
2015/06/23 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
详解Python类和对象内容
2021/06/22 Python
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android