JS实现标签滚动切换效果
作者:laozhang 发布时间:2023-08-24 00:35:37
标签:JS,标签,滚动,切换
本文的JS效果是在鼠标点击ITEM标签的时候,实现下方的内容跟随滚动切换的效果,我们先来看下运行后的效果图。
以下是脚本之家原创的运行代码:
<!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://www.aspxhome.com" target="_blank">asp之家</a></p>
</body>
</html>
在代码中我们引用了百度的jquery
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
需要的朋友跟着学习下吧,感谢你对脚本之家的支持。
0
投稿
猜你喜欢
- 本文假设某些特定类型的文件和大小为0的文件为垃圾文件,可以自由扩展代码的列表,也就是垃圾文件的类型。from os.path import
- 下面就来介绍下SQL Server 2008中使用的端口有哪些:首先,最常用最常见的就是1433端口。这个是数据库引擎的端口,如果我们要远程
- 1. 确认已经安装了NT/2000和SQL Server的最新补丁程序,不用说大家应该已经安装好了,但是我觉得最好还是在这里提醒一
- 最近做项目的时候遇到过oracle数据库导入导出,在这里我做下记录,防止自己忘记了,有什么不对或者不足的地方,欢迎广大博友拍砖,哈哈~导出命
- 本文实例为大家分享了微信小程序实现登陆注册滑块验证的具体代码,供大家参考,具体内容如下一、创建自定义组件MoveVerifyMoveVeri
- SQL Server Extended Events(下面简称XEvent)是SQL Server 2008里新加的事件处理系统,用来取代S
- 使用图层可以像素为单位精确定位页面元素,并且可以将层放置在页面的任意位置。当把页面元素放入图层之中时,还可以控制哪个显示在前面、哪个显示在后
- YUI Compressor 压缩 JavaScript 的内容包括:移除注释移除额外的空格细微优化标识符替换(Identifier Rep
- 在国内外大中型数据库管理系统中,把ORACLE作为数据库管理平台的用户比较多。RACLE 不论是数据库管理能力还是安全性都是无可非
- Bootstrap提供了四种用于<img>类的样式,分别是:.img-rounded:圆角 (IE8 不支持),添加 borde
- 新标准的熟悉和入门内容: 还在用 HTML 编写文档?如果是的话,就不符合当前标准了。2000 年&
- 昨天打包下载了一个服务器整站,拿到这个*.mdb的文件后,却不知道怎么用,百度了一下,才知道是一种木马打包的形式文件,不能用WINrar来解
- 1.MS SCRIPT ENCODE基本上没什么用了,一段JS就可以破解2.封装成DLL比较可行的方法,有通过VB封装成DLL的例子,而且无
- 当我们在使用validate等方法进行验证时,如果是错误,则会返回首页1、直接在请求头中在请求头header中,accept使用appcli
- 面对不断成长的用户,跟随用户的脚步齐步向前,做引起共鸣的改变,去除低龄化的设计,用成熟稳重的心态面对用户。QQBanner自2006 年推出
- 今天在网上找了一下Microsoft Enterprise Library 5.0 如何集成MySQL数据库, 结果只找到了entlib 4
- 那你也许会问及,怎样获取当前系统日期的最大时间值,如yyyy-MM-dd 23:59:59.997。 我们可以使用DATEADD函数,来实现
- javascript可以根据输入值自动搜索显示相关的select列表,对于列表很长时可以很方便的查找到要的值。js代码:<script
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 主键表的主键(primary key,主关键字)是表中的一个或多个字段,它的值用于惟一地标识表中的某一条记录。一个表不能有多个主关键字,并且