JS實現(xiàn)往下不斷流動網(wǎng)頁背景的方法
更新時間：2015年02月27日 12:09:29 作者：代碼家園
這篇文章主要介紹了JS實現(xiàn)往下不斷流動網(wǎng)頁背景的方法,實例分析了遞歸調(diào)用自定義函數(shù)scrollBG實現(xiàn)動態(tài)背景特效的功能,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)往下不斷流動網(wǎng)頁背景的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>JS實現(xiàn)的往下不斷流動的網(wǎng)頁背景</title>
</head>
<body background="/images/bg002.jpg">
<script language="JavaScript">
<!-- Begin
var backgroundOffset = 0; //背景圖片的偏移量
var bgObject = eval('document.body'); //得到文擋本身的對象
function scrollBG(maxSize) { //這個函數(shù)就是滾動背景的核心
backgroundOffset = backgroundOffset + 1; //將背景偏移加1點
if (backgroundOffset > maxSize) backgroundOffset = 0; //如果偏移量超過了最大值則回零
bgObject.style.backgroundPosition = "0 " + backgroundOffset; //設(shè)定背景的偏移量，使其生效
}
var ScrollTimer = window.setInterval("scrollBG(307)", 64); //設(shè)定每次移動背景之間的間隔。
// End -->
</script>
<div style="position: absolute; top: 200; left:300;">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><b>流動的背景是不是很漂亮？</b></td>
</tr>
</table>
</div>
</body>
</html>
<head>
<title>JS實現(xiàn)的往下不斷流動的網(wǎng)頁背景</title>
</head>
<body background="/images/bg002.jpg">
<script language="JavaScript">
<!-- Begin
var backgroundOffset = 0; //背景圖片的偏移量
var bgObject = eval('document.body'); //得到文擋本身的對象
function scrollBG(maxSize) { //這個函數(shù)就是滾動背景的核心
backgroundOffset = backgroundOffset + 1; //將背景偏移加1點
if (backgroundOffset > maxSize) backgroundOffset = 0; //如果偏移量超過了最大值則回零
bgObject.style.backgroundPosition = "0 " + backgroundOffset; //設(shè)定背景的偏移量，使其生效
}
var ScrollTimer = window.setInterval("scrollBG(307)", 64); //設(shè)定每次移動背景之間的間隔。
// End -->
</script>
<div style="position: absolute; top: 200; left:300;">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><b>流動的背景是不是很漂亮？</b></td>
</tr>
</table>
</div>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)緩動動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Extjs 點擊復(fù)選框在表格中增加相關(guān)信息行
這篇文章主要介紹了Extjs 點擊復(fù)選框在表格中增加相關(guān)信息行 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
UniApp使用manifest.json應(yīng)用配置的超詳細(xì)教學(xué)
這篇文章主要給大家介紹了關(guān)于uni-app應(yīng)用配置manifest.json最全最詳細(xì)配置,manifest.json文件是應(yīng)用的配置文件,用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序使用二次貝塞爾曲線畫波浪，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
layui監(jiān)聽select變化,以及設(shè)置radio選中的方法
今天小編就為大家分享一篇layui監(jiān)聽select變化,以及設(shè)置radio選中的方法，具有好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)切換多張圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
JavaScript 實現(xiàn)一個響應(yīng)式系統(tǒng)的解決方案
這篇文章主要介紹了JavaScript 實現(xiàn)一個響應(yīng)式系統(tǒng)的解決方案,本次示例使用Proxy實現(xiàn)數(shù)據(jù)監(jiān)控,結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了檢查表單元素的值是否為空的實例代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas繪制折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
在 JavaScript 的嚴(yán)格模式下，對 JavaScript 的寫法做了一些限制。如果在嚴(yán)格模式下違反了這些限制，代碼就會報錯，對javascript嚴(yán)格模式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-11-11