本文介绍了一种利用HTML和JavaScript实现的网页内框图片向上滚动的效果。通过设置表格单元格的高度和背景颜色，结合JavaScript定时滚动功能，使得页面内的元素能够连续滚动显示。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Copyright" content="我要QQ代码,www.51qqdm.cn" />
<meta name="description" content="我要QQ代码！" />
<meta content="我要QQ代码" name="keywords" />
<title>网页内框图片向上滚动效果</title>
<style type="text/css">
body {text-align:center}
td {font-size: 12px;text-align:center}
</style>
</head>
<body>
<div id=makewing style="height:60">
<table width="778" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="60" bgcolor="#66CCFF">1</td>
</tr>
<tr>
<td height="60" bgcolor="#FFCC66">2</td>
</tr>
<tr>
<td height="60" bgcolor="#99CC66">3</td>
</tr>
<tr>
<td height="60" bgcolor="#66CCFF">4</td>
</tr>
<tr>
<td height="60" bgcolor="#FFCC66">5</td>
</tr>
<tr>
<td height="60" bgcolor="#99CC66">6</td>
</tr>
</table>
<script language=JavaScript src="1.js"></script>
</div>
</body>
</html>
1.js代码如下：
marqueesHeight=60;stopscroll=false;
with(makewing)...{
style.width=0; style.height=marqueesHeight; style.overflowX="visible"; style.overflowY="hidden"; noWrap=true; onmouseover=new Function("stopscroll=true"); onmouseout=new Function("stopscroll=false");
} preTop=0; currentTop=marqueesHeight; stoptime=0; makewing.innerHTML+=makewing.innerHTML; function init_srolltext()...{ makewing.scrollTop=0; setInterval("scrollUp()",1);}init_srolltext();function scrollUp()...{ if(stopscroll==true) return; currentTop+=1; if(currentTop==marqueesHeight+1)
...{ stoptime+=1; currentTop-=1; if(stoptime==300) ...{ currentTop=0; stoptime=0; 
} } else ...{ preTop=makewing.scrollTop; makewing.scrollTop+=1; if(preTop==makewing.scrollTop)...{ makewing.scrollTop=marqueesHeight; makewing.scrollTop+=1; } }}init_srolltext();
扫一扫
2758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
