仿QQ迷你首页的左右滚动Tab选项卡

2024-09-05 12:19:54

字体：大中小

来源：转载

供稿：网友

仿QQ迷你首页的左右滚动Tab选项卡，只是实现了关键的左右滚动，至于选项卡可以修改一下，这里主要是发出大家比较关注的左右控制滚动。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>滚动Tab</title><style type="text/css">div#box{	float:left;	}div#box span{	display:block;	cursor:pointer;	width:24px;	height:24px;	}div#box span#left{	float:left;	background:transparent url(http://www.codefans.net/jscss/demoimg/200906/all2008.gif) no-repeat scroll left -82px;	}div#box span#right{	float:left;	background:transparent url(http://www.codefans.net/jscss/demoimg/200906/all2008.gif) no-repeat scroll -384px -82px;	}div#qqmini{	float:left;	width:345px;	overflow:hidden;	}ul{	margin:0px;	float:left;	width:9999px;	overflow:hidden;	margin-left:-2.5em;	*margin-left:-1px;	}li{	list-style-type:none;	float:left;	background:transparent url(http://www.codefans.net/jscss/demoimg/200906/all2008.gif) no-repeat scroll 0 -31px;	width:69px;	height:18px;	padding-top:5px;	text-align:center;	cursor:pointer;	}</style></head><body><div id="box"><span id="left"></span><div id="qqmini"><UL>	<LI>新闻</LI>	<LI>财经</LI>	<LI>娱乐</LI>	<LI>体育</LI>	<LI>汽车</LI>	<LI>读书</LI>	<LI>博客</LI>	<LI>游戏</LI></UL></div><span id="right"></SPAN>
</div>
</div>
<div class=page1>
<p align="center" class="pageLink"></p>
</div>

<div class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1557411.html'>另类飞出的CSS分类导航菜单</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1557413.html'>CSS竖向滑动展开的折叠菜单</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

学习交流