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