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实现缓动动画效果

    javascript实现缓动动画效果

    这篇文章主要为大家详细介绍了javascript实现缓动动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Extjs 点击复选框在表格中增加相关信息行

    Extjs 点击复选框在表格中增加相关信息行

    这篇文章主要介绍了Extjs 点击复选框在表格中增加相关信息行 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • UniApp使用manifest.json应用配置的超详细教学

    UniApp使用manifest.json应用配置的超详细教学

    这篇文章主要给大家介绍了关于uni-app应用配置manifest.json最全最详细配置,manifest.json文件是应用的配置文件,用于指定应用的名称、图标、权限等,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 微信小程序使用二次贝塞尔曲线画波浪

    微信小程序使用二次贝塞尔曲线画波浪

    这篇文章主要为大家详细介绍了微信小程序使用二次贝塞尔曲线画波浪,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • layui监听select变化,以及设置radio选中的方法

    layui监听select变化,以及设置radio选中的方法

    今天小编就为大家分享一篇layui监听select变化,以及设置radio选中的方法,具有好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript实现切换多张图片

    JavaScript实现切换多张图片

    这篇文章主要为大家详细介绍了JavaScript实现切换多张图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • JavaScript 实现一个响应式系统的解决方案

    JavaScript 实现一个响应式系统的解决方案

    这篇文章主要介绍了JavaScript 实现一个响应式系统的解决方案,本次示例使用Proxy实现数据监控,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • 检查表单元素的值是否为空的实例代码

    检查表单元素的值是否为空的实例代码

    这篇文章主要介绍了检查表单元素的值是否为空的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript canvas绘制折线图

    JavaScript canvas绘制折线图

    这篇文章主要为大家详细介绍了JavaScript canvas绘制折线图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • JavaScript严格模式详解

    JavaScript严格模式详解

    在 JavaScript 的严格模式下,对 JavaScript 的写法做了一些限制。如果在严格模式下违反了这些限制,代码就会报错,对javascript严格模式相关知识感兴趣的朋友一起学习吧
    2015-11-11

最新评论