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 相关文章推荐
html下载本地
Jun 19 Javascript
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
js中的闭包学习心得
Feb 06 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 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函数解决SQL injection
2006/12/09 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
python实现udp数据报传输的方法
2014/09/26 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
基于python实现简单日历
2018/07/28 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
运动会入场词60字
2014/02/15 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
事业单位考核材料
2014/05/21 职场文书
大学生村官考核材料
2014/05/23 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
公司职员入党自传书
2015/06/26 职场文书
大学军训口号大全
2015/12/24 职场文书
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL