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