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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
javascript 写的一个简单的timer
Jul 30 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 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使用NumberFormatter格式化货币的方法
2015/03/21 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
vuex实现简易计数器
2016/10/27 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
高职教师岗位职责
2013/12/24 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
学校百日安全活动总结
2015/05/07 职场文书
计划生育责任书
2015/05/09 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python