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模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
vue组件与复用详解
Apr 08 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 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中的哈希表
2014/01/30 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
理解javascript封装
2016/02/23 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
在Python中使用正则表达式的方法
2015/08/13 Python
简单实现python进度条脚本
2017/12/18 Python
python入门教程 python入门神图一张
2018/03/05 Python
详解flask表单提交的两种方式
2018/07/21 Python
python数组循环处理方法
2019/08/26 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
运动会致辞稿50字
2014/02/04 职场文书
学历公证书范本
2014/04/09 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
大学生团员个人总结
2015/02/14 职场文书
国富论读书笔记
2015/06/26 职场文书
初三数学教学反思
2016/02/17 职场文书
公司转让协议书
2016/03/19 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
ES6 解构赋值的原理及运用
2021/05/25 Javascript
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server