
第一步:把如下代码加入到<head>区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function verScroll(dir, spd, loop) {
loop = true
direction = "up"
speed = 10
scrolltimer = null
if (document.layers) {
var page = eval(document.contentLayer)
}
else {
if (document.getElementById) {
var page= eval("document.getElementById( contentLayer ).style")
}
else {
if (document.all) {
var page = eval(document.all.contentLayer.style)
}
}
}
direction = dir
speed = parseInt(spd)
var y_pos = parseInt(page.top)
if (loop == true) {
if (direction == "dn") {
page.top = (y_pos - (speed))
} else {
if (direction == "up" &&y_pos <10) {
page.top = (y_pos + (speed))
} else {
if (direction == "top") {
page.top = 10
}
}
}
scrolltimer = setTimeout("verScroll(direction,speed)", 1)
}
}
function stopScroll() {
loop = false
clearTimeout(scrolltimer)
}
// End -->
</script>
第二步:把如下代码加入到<body>区域中
<div id="contentLayer" style="position:absolutewidth:300pxz-index:1left: 39pxtop: 51px">
aaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbb
ccccccccccccccccccccccccc
ddddddddddddddddddddddddd
eeeeeeeeeeeeeeeeeeeeeeeee
rrrrrrrrrrrrrrrrrrrrrrrr
ffffffffffffffffffffffg
ggggggggggggggggggggggggg
hhhhhhhhhhhhhhhhhhhhhhhhe
eeeeeeeeeeeeeeeeeeeeeee
</div>
<div id="scrollmenu" style="position:absolutewidth:236pxheight:30pxz-index:1left:328pxtop: 44px">
<table border=1><tr><td>
<table>
<tr>
<td align=left>Up</td>
<td></td>
<td align=right>Down</td>
</tr>
<tr>
<td colspan=3>
<a href="#" onMouseOver="verScroll( up , 25 , true )" onMouseOut="stopScroll()"><<<</a>
<a href="#" onMouseOver="verScroll( up , 5 , true )" onMouseOut="stopScroll()"><<</a>
<a href="#" onMouseOver="verScroll( up , 1 , true )" onMouseOut="stopScroll()"><</a>|
<a href="#" onMouseOver="verScroll( dn , 1 , true )" onMouseOut="stopScroll()">></a>
<a href="#" onMouseOver="verScroll( dn , 5 , true )" onMouseOut="stopScroll()">>></a>
<a href="#" onMouseOver="verScroll( dn , 25 , true )" onMouseOut="stopScroll()">>>></a>
</td>
</tr>
</table>
</td></tr></table>
</div>
1.新建网页,在body里插入<div style="width:400pxheight:300pxoverflow:auto"><img align="center" src="images/香蕉-成品-三张贴图.jpg" /></div>,表示插入图片并设置一个400x300像素的滚动条区域,滚动条根据需求自动生成。2.在IE里测试效果。
css属性 overflow-y:autoDIV里面的内容超过DIV的高度,右边就会自动出现滚动条1、用一个div,定制成图中的宽度和高度
2、然后再把div的样式设成overflow-y:scroll,当div里的文字超出那个高度的时候,滚动条就出来了。
例如:<div style="width:100pxheight:100pxoverflow:autoborder:1px solid #000000"><img src="" style="width:300pxheight:300px"></div>
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)