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


Posted in Javascript onFebruary 27, 2015

本文实例讲述了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 相关文章推荐
心扬JS分页函数代码
Sep 10 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 #Javascript
asp.net+js实现金额格式化
Feb 27 #Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 #Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 #Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 #Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 #Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 #Javascript
You might like
非常好用的Zend Framework分页类
2014/06/25 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
vue如何搭建多页面多系统应用
2020/06/17 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
python中遍历文件的3个方法
2014/09/02 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
python多进程间通信代码实例
2019/09/30 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
商场端午节活动方案
2014/01/29 职场文书
公司搬迁通知
2015/04/20 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers