JS实现往下不断流动网页背景的方法

更新时间：2015年02月27日 12:09:29 作者：代码家园

这篇文章主要介绍了JS实现往下不断流动网页背景的方法,实例分析了递归调用自定义函数scrollBG实现动态背景特效的功能,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS实现往下不断流动网页背景的方法。分享给大家供大家参考。具体实现方法如下：

<html>

<head>

<title>JS实现的往下不断流动的网页背景</title>

</head>

<body background="/images/bg002.jpg">

<script language="JavaScript">

<!-- Begin

var backgroundOffset = 0;    //背景图片的偏移量

var bgObject = eval('document.body');    //得到文挡本身的对象

function scrollBG(maxSize) {    //这个函数就是滚动背景的核心

backgroundOffset = backgroundOffset + 1;   //将背景偏移加1点

if (backgroundOffset > maxSize) backgroundOffset = 0;  //如果偏移量超过了最大值则回零

bgObject.style.backgroundPosition = "0 " + backgroundOffset; //设定背景的偏移量，使其生效

}

var ScrollTimer = window.setInterval("scrollBG(307)", 64); //设定每次移动背景之间的间隔。

// 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程序设计有所帮助。

您可能感兴趣的文章:

JavaScript使用Range调色及透明度实例
本文给大家分享的是使用range做的一个简单的手动调色并可以得到RGB值的小工具，非常的实用，有需要的小伙伴可以参考下
2016-09-09
一文搞懂ES6中的Map和Set
这篇文章主要介绍了ES6中的Map和Set，本文给大家提到了map和object的区别 ,需要的朋友可以参考下
2019-05-05
BootStrap制作导航条实例代码
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。本文给大家介绍BootStrap制作导航条实例代码，感兴趣的朋友一起学习吧
2016-05-05
Js使用WScript.Shell对象执行.bat文件和cmd命令
这篇文章主要介绍了Js使用WScript.Shell对象执行.bat文件和cmd命令,需要的朋友可以参考下
2014-12-12
设置BFC功能及使用示例详解
这篇文章主要为大家介绍了设置BFC功能及使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
一个报数游戏js版(约瑟夫环问题)
随便给一个数比如100，那么从1到100围成一个圆圈，然后就类似123123报数一样逢3就舍掉，一直这样轮询那么最后剩下来的那个数是多少？
2010-08-08
javascript中Date对象应用之简易日历实现
这篇文章主要为大家详细介绍了javascript中Date对象应用之简易日历实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
图解js图片轮播效果
这篇文章主要以图片展示的方式向大家讲解了js图片轮播效果的实现方法，对图片轮播实现原理进行了详细介绍，感兴趣的朋友可以参考一下
2015-12-12
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事！
写这篇文章的目的是经常看到开发人员说：把字符串转化为JSON对象，把JSON对象转化成字符串等类似的话题，所以把之前收藏的一篇老外的文章整理翻译了一下，供大家讨论，如有错误，请大家指出，多谢
2012-01-01
Bootstrap源码学习笔记之bootstrap进度条
本文通过源码给大家解析bootstrap进度条样式，分为条纹进度条，动态条纹进度条，层叠进度条和带Label的进度条，下面通过代码给大家简单介绍下，感兴趣的朋友一起看看吧
2016-12-12