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)文章
JavaScript使用Range調(diào)色及透明度實例
本文給大家分享的是使用range做的一個簡單的手動調(diào)色并可以得到RGB值的小工具，非常的實用，有需要的小伙伴可以參考下2016-09-09
這篇文章主要介紹了ES6中的Map和Set，本文給大家提到了map和object的區(qū)別 ,需要的朋友可以參考下2019-05-05
Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。本文給大家介紹BootStrap制作導(dǎo)航條實例代碼，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
Js使用WScript.Shell對象執(zhí)行.bat文件和cmd命令
這篇文章主要介紹了Js使用WScript.Shell對象執(zhí)行.bat文件和cmd命令,需要的朋友可以參考下2014-12-12
這篇文章主要為大家介紹了設(shè)置BFC功能及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
隨便給一個數(shù) 比如100，那么從1到100圍成一個圓圈，然后就類似123123報數(shù)一樣逢3就舍掉，一直這樣輪詢 那么最后剩下來的那個數(shù)是多少？2010-08-08
javascript中Date對象應(yīng)用之簡易日歷實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了javascript中Date對象應(yīng)用之簡易日歷實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要以圖片展示的方式向大家講解了js圖片輪播效果的實現(xiàn)方法，對圖片輪播實現(xiàn)原理進(jìn)行了詳細(xì)介紹，感興趣的朋友可以參考一下2015-12-12
深入理解JavaScript系列(9) 根本沒有“JSON對象”這回事！
寫這篇文章的目的是經(jīng)?？吹介_發(fā)人員說：把字符串轉(zhuǎn)化為JSON對象，把JSON對象轉(zhuǎn)化成字符串等類似的話題，所以把之前收藏的一篇老外的文章整理翻譯了一下，供大家討論，如有錯誤，請大家指出，多謝2012-01-01
Bootstrap源碼學(xué)習(xí)筆記之bootstrap進(jìn)度條
本文通過源碼給大家解析bootstrap進(jìn)度條樣式，分為條紋進(jìn)度條，動態(tài)條紋進(jìn)度條，層疊進(jìn)度條和帶Label的進(jìn)度條，下面通過代碼給大家簡單介紹下，感興趣的朋友一起看看吧2016-12-12