JS实现标签滚动切换效果
作者：laozhang 时间：2023-08-24 00:35:37
本文的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>
需要的朋友跟着学习下吧，感谢你对脚本之家的支持。
标签：JS,标签,滚动,切换
0
投稿猜你喜欢
使用GitHub和Python实现持续部署的方法
2022-07-16 22:54:35
一文带你探寻Python中的装饰器
2021-07-11 10:17:59
基于Python实现模拟三体运动的示例代码
2022-03-29 21:40:37
Python内置函数Type()函数一个有趣的用法
2023-01-16 06:30:44
OpenCV+Imutils实现图像的旋转操作
2021-07-25 20:39:42
详解如何修改jupyter notebook的默认目录和默认浏览器
2022-07-01 14:34:54
详解Python进阶之切片的误区与高级用法
2022-09-18 04:03:12
与ClientWidth有关的一点资料
2024-04-22 22:25:08
MySQL判断时间段是否重合的两种方法
2024-01-21 02:41:05
golang的httpserver优雅重启方法详解
2023-08-06 00:22:41
MySQL面试题讲解之如何设置Hash索引
2024-01-21 17:23:55
教你如何6秒钟往MySQL插入100万条数据的实现
2024-01-19 02:17:35
OpenCV实现车辆识别和运动目标检测
2023-09-22 18:55:40
Go语言文件读取的一些总结
2024-04-27 15:30:45
Python中的np.argmin()和np.argmax()函数用法
2021-09-10 16:00:51
D3.js 实现带伸缩时间轴拓扑图的示例代码
2024-05-09 10:20:13
javascript管中窥豹 形参与实参浅析
2024-04-16 09:25:54
python自定义封装带颜色的logging模块
2022-06-17 04:23:48
关于Vue 监控数组的问题
2024-05-28 15:52:13
python求质数的3种方法
2023-02-12 04:07:54