<html>
<head>
<style>
body{margin:0px}
ul{list-style:noneborder:0padding:0pxmargin:0px}
li{list-style:nonefloat:leftborder:0padding:0pxmargin:0px}
img{border:0px padding:0pxmargin:0px}
</style>
</head>
<body>
<center><div id="div1" style="overflow:hiddencursor:handmargin-top:50px" onmouseover="stop()" onmouseout="ss()">
<ul id="img" style="clear:both"><!--放图片的容器，此容器在div1里滚动-->
<!--以下是要滚动的内容-->
<li><img id="img0" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block" /></li>
<li><img id="img1" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block" /></li>
<li><img id="img2" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block" /></li>
<li><img id="img3" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block" /></li>
</ul>
</div>
</center>
<script language="javascript">
var w,h,id,speed,Html
w=400//-------滚动容器的宽度--------//
h=100//-------滚动容器的高度--------//
id="div1"//-------滚动容器的id--------//
direction="left"//-------滚动方向有四个值
1、在html编辑器软件内，新建html页面，（一般我们常使用的两款编辑器是HBuilder和Adobe Dreamweaver，这里我使用的软件是HBuilder）。
2、在<body></body>添加<div class="nav"></div>,于<div class="nav"></div>中间添加<ul></ul>,在<ul>内添加<li>标签，<li>内同时添加<a>标签，方便连接导航跳转。
3、在新建的<a></a>内，添加横向导航要显示的内容。
4、在<title></title>下方添加一个<style type="text/css"></style>。
5、源文件html保存后，使用浏览器打开预览效果。
overflow:scroll/*任何时候都强制显示滚动条*/overflow:auto/*需要的时候会出现滚动条*/
overflow-x:auto/*控制X方向的滚动条*/
overflow-y:auto/*控制Y方向的滚动条*/
示例:
<HTML>
<HEAD>
<TITLE>测试表格内的滚动条</TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td>表格内的滚动条:</td>
<td>
<div id="wins"
style="position:absoluteheight:200width:200overflow:autobackground:#EEEEEE">
<p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>
<p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
<p>ppppppppppppppppppppppppp </p>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<span onmouseover='scrollb=setInterval("wins.scrollLeft-=10",100)'
onmouseout=clearInterval(scrollb)>向左</span>
<span onmouseover='scrollb=setInterval("wins.scrollTop-=10",100)'
onmouseout=clearInterval(scrollb)>向上</span>
<span onmouseover='scrollb=setInterval("wins.scrollLeft+=10",100)'
onmouseout=clearInterval(scrollb)>向右</span>
<span onmouseover='scrollb=setInterval("wins.scrollTop+=10",100)'
onmouseout=clearInterval(scrollb)>向下</span>
</td>
</tr>
</table>
</BODY>
</HTML>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）