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 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
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(4) php 函数 补充2
2010/02/15 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
jquery里的each使用方法详解
2010/12/22 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
浅析Python中的多重继承
2015/04/28 Python
python删除列表中重复记录的方法
2015/04/28 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
使用python实现接口的方法
2017/07/07 Python
python正则表达式之对号入座篇
2018/07/24 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
python如何实时获取tcpdump输出
2020/09/16 Python
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
客户代表自我评价范例
2013/09/24 职场文书
投资协议书范本
2014/04/21 职场文书
推广活动策划方案
2014/08/23 职场文书
2014年实验室工作总结
2014/12/03 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP