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

 这篇文章主要介绍了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程序设计有所帮助。

时间: 2024-11-01 23:14:10

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

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

本文实例讲述了JS实现往下不断流动网页背景的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现的往下不断流动的网页背景</title> </head> <body background="/images/bg002.jpg"> <script language="JavaScript"> <!-- Begin

jQuery通过写入cookie实现更换网页背景的方法_jquery

本文实例讲述了jQuery通过写入cookie实现更换网页背景的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

JS动态修改iframe内嵌网页地址的方法_javascript技巧

本文实例讲述了JS动态修改iframe内嵌网页地址的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过修改iframe的src属性动态修改iframe的内嵌网页 <!DOCTYPE html> <html> <head> <script> function changeSrc() { document.getElementById("myframe").src="http://google.com"; }

入门:Dreamweaver8设计网页背景实例讲解

dreamweaver|dreamweaver8|设计|网页|网页背景 本教程由网页教学网原创.网页教学网-专业的网页教学站点,为您提供最新.最快.最实用的技术. 我们在网页制作过程中,尤其是初学的人们读喜欢给自己的网页制作一个背景,今天我给大家讲解一下在Dreamweaver8中设置网页背景的方法. 首先启动Dreamweaver软件,新建立一个HTMl文档. 然后我们执行"修改"=>"页面属性"(快捷键Ctrl+J)菜单命令,弹出"页面属性&qu

Dreamweaver8设计网页背景实例讲解

我们在网页制作过程中,尤其是初学的人们读喜欢给自己的网页制作一个背景,今天我给大家讲解一下在Dreamweaver8中设置网页背景的方法. 首先启动Dreamweaver软件,新建立一个HTMl文档. 然后我们执行"修改"=>"页面属性"(快捷键Ctrl+J)菜单命令,弹出"页面属性"对话框,在"外观"分类中会发现背景图像的下方多了一个"重复"选项,可以选择不重复(no-repeat).重复(repe

Dreamweaver8设计网页背景讲解

我们在网页制作过程中,尤其是初学的人们读喜欢给自己的网页制作一个背景,今天我给大家讲解一下在Dreamweaver8中设置网页背景的方法. 首先启动Dreamweaver软件,新建立一个HTMl文档. 然后我们执行"修改"=>"页面属性"(快捷键Ctrl+J)菜单命令,弹出"页面属性"对话框,在"外观"分类中会发现背景图像的下方多了一个"重复"选项,可以选择不重复(no-repeat).重复(repe

JS实现网页背景颜色与select框中颜色同时变化的方法

 这篇文章主要介绍了JS实现网页背景颜色与select框中颜色同时变化的方法,实例分析了javascript操作select及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现网页背景颜色与select框中颜色同时变化的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

js随机生成网页背景颜色的方法

 这篇文章主要介绍了js随机生成网页背景颜色的方法,涉及javascript操作背景色的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js随机生成网页背景颜色的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <HTML> <HEAD> <TITLE>随机生成网页背景颜色的JS特效</TITLE> <STYLE> .30pt{font-size:30pt;color:#de3076} </STYLE&

JS实现从网页顶部掉下弹出层效果的方法_javascript技巧

本文实例讲述了JS实现从网页顶部掉下弹出层效果的方法.分享给大家供大家参考.具体如下: 这里介绍的JavaScript动画背景出层,实现从网页顶部掉下来的感觉,停止时还带有缓冲弹跳的意思,从上到下显示的动画弹出层,带关闭功能,没有怎么美化,喜欢的用时候息动手美化下,觉得不错. 运行效果如下图所示: 具体代码如下: <HTML><HEAD><TITLE>窗口从上掉下来</TITLE> </HEAD> <BODY bgColor=#fef4d9