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 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
详解React 条件渲染
Jul 08 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
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
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
js 实现菜单上下显示附效果图
2013/11/21 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
python__name__原理及用法详解
2019/11/02 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
鲜花方阵解说词
2014/02/13 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
人事任命书格式
2014/06/05 职场文书
党员一帮一活动总结
2014/07/08 职场文书
教师工作表现评语
2014/12/31 职场文书
教代会闭幕词
2015/01/28 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
倡议书的格式写法
2015/04/28 职场文书
电影圆明园观后感
2015/06/03 职场文书