html 自动显示横向滚动条

html-css010

html 自动显示横向滚动条,第1张

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>

HTML页面图片横向滚播效果:

<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"//-------滚动方向有四个值