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脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
angularjs自定义过滤器demo示例
Aug 24 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
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
vue中的inject学习教程
2019/04/24 Javascript
深入浅析Python传值与传址
2018/07/10 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python实现序列化及csv文件读取
2020/01/19 Python
详解Anaconda 的安装教程
2020/09/23 Python
python 爬取小说并下载的示例
2020/12/07 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
应届生如何写自荐信
2014/01/05 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
林肯就职演讲稿
2014/05/19 职场文书
施工安全员岗位职责
2015/04/11 职场文书
休学证明范本
2015/06/19 职场文书
学习心得体会
2019/06/20 职场文书