仿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   class="iwvjtn8m0"   id="box"><span id="left"></span><div   class="iwvjtn8m0"   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   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   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   id="iwvjtn8m0"   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">

學習交流