滑动选项卡的制作

最新推荐文章于 2022-09-08 16:42:50 发布

weixin_30613727

最新推荐文章于 2022-09-08 16:42:50 发布

阅读量119

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zzq123/p/9954795.html

本文介绍了一种使用HTML、CSS和JavaScript实现滑动效果的选项卡切换方法，通过相对定位和动画实现美观的界面切换。

我们在编写网页的时候有时候会有选项栏，普通的显示隐藏的效果可以满足我们每个栏项的切换，但是不美观，下面我们来写可以滑动效果的选项卡切换

首先，要有一个显示窗口，设置属性为超出部分隐藏，然后将下面选项的所有内容平铺在网页中，每张选项的长度都一样，

给它一个相对定位，每个选项下标对应一张选项图，相对于初始位置往左或者往右移动多少张选项图的位置

代码如下：

<div class="toutiao">
    <div class="newsbox">
	<div class="newstab">
		<ul class="newstabs">
		    <li class="yjk" onclick="yidong('0','0')">头条</li>
	            <li class="yjk"  onclick="yidong('353','1')">新闻</li>
		    <li class="yjk"  onclick="yidong('706','2')">公告</li>
		    <li class="yjk"  onclick="yidong('1059','3')">活动</li>
		    <li class="yjk"  onclick="yidong('1412','4')">直播</li>
		    <li id="more">更多+</li>
		</ul>
	</div>
      <div class="listpart">
	<div class="listbox">
                <ul class='xiangmu'>
              <ul class='xiangmu'>
             <ul class='xiangmu'>
             <ul class='xiangmu'>
             <ul class='xiangmu'>    
		    </div>
	    </div>
    </div>
</div>

.toutiao{
	width: 393px;
	height: 300px;
	position: relative;
	margin: 15px 280px 0 0;
	background: #fff;
	overflow: hidden;
	float: left;
}
.newsbox{
	width: 393px;
	height:281px;
	position: relative;
	overflow: hidden;
	outline: none;
	padding: 15px 20px 0;
}
.newstab{
	width: 353px;
	height: 43px;
}
.newstabs li:hover{
	color: #01B8A9;
}
.newstabs{
	width: 351px;
	height: 43px;
	overflow: hidden;
	list-style: none;
}
.newstabs li{
	width: 50px;
	height: 43px;
	float: left;
	font-size: 14px;
	color: #000;
	line-height: 43px;
	text-align: center;
	font-weight: 400;
	cursor: pointer;
}
#more{
	width: 50px;
	height: 43px;
	float: right;
	font-size: 15px;
	color: #000000;
	cursor: pointer;
}
.listpart{
	width: 351px;
	height: 222px;
	position: relative;
	border-top: 1px solid #e4eae9;
	overflow: hidden;
	z-index: 1;
}
.listbox{
	width: 1765px;
	height: 204px;
	top: 15px;
	position: absolute;
	left: 0;
}
.xiangmu{
	width: 353px;
	height: 204px;
	float: left;
	font-size: 13px;
	list-style: none;
}

下面是js方法

//选项卡滚动
function yidong(n,m){
	var a=-n+"px";
	$(".yjk").css("color","#000");
	$(".yjk")[m].style.color="#01B8A9";
	$(".listbox").stop().animate({
		left:a
	});
	
}

通过这个函数就可以完成选项卡的滚动效果了

转载于:https://www.cnblogs.com/zzq123/p/9954795.html