<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
    #divbg{
        width:710px;
        height: 339px;
        /*border:1px solid red;*/
        background-image: url("image/scenery.jpg");/*添加背景图片*/
        background-size: 100% 100%;
        position: absolute;
        top:100px;
        left:100px;
    }
</style>
<body>
<div id="divbg"></div>
<script type="text/javascript">
    var divbg=document.getElementById("divbg");//获取div
    var x=0;
//    var y=0;//定义垂直方向初始距离
    var divbgTimer=setInterval(moveBg,100);//设置调用这个方法的定时器，100ms调用一次
    function moveBg(){//背景移动函数
        divbg.style.backgroundPositionX=x+"px";//对div对象的背景图片进行移动
        x=x+2;//向右移动
//        divbg.style.backgroundPositionY=y+"px";
//        y=y+2;//向下移动
    }
</script>
</body>
</html>

html背景自动移动的更多相关文章

  1. [MFC]SDI在图片背景上实现文本跟随鼠标移动

    SDI是单文档接口应用程序的简称.本文要实现的是在视图区域显示一张图片,然后在图片表层显示文字,并且文字跟随鼠标移动.思考一下,可以判断这个问题一共分为以下几个部分:1.显示图片:2.找到鼠标的位置: ...

  2. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  3. 冒泡，setinterval，背景图的div绑定事件，匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

  4. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  5. CSS 3学习——box-sizing和背景

    box-sizing 在CSS 2中设置元素的width和height仅仅是设置了元素内容区的宽和高,元素实际的尺寸是margin + border + padding + 内容区. CSS 3(截止 ...

  6. .NET同步与异步之相关背景知识（六）

    在之前的五篇随笔中,已经介绍了.NET 类库中实现并行的常见方式及其基本用法,当然.这些基本用法远远不能覆盖所有,也只能作为一个引子出现在这里.以下是前五篇随笔的目录: .NET 同步与异步之封装成T ...

  7. Android—ListView条目背景为图片时，条目间距问题解决

    ListView是android开发中使用最普遍的控件了,可有的listView条目的内容颇为丰富,甚至为了美观,背景用指定图片,如下图:

  8. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  9. Atitit 动态按钮图片背景颜色与文字组合解决方案

    Atitit 动态按钮图片背景颜色与文字组合解决方案 转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标 文字分拆,使用字 ...

随机推荐

  1. maven仓库介绍

    maven仓库介绍 http://juvenshun.iteye.com/blog/359256

  2. 一条结合where、group、orderby的linq语法

    DataTable dt = (from x in dsResult.Tables[0].AsEnumerable() where DataTrans.CBoolean(x["IsCheck ...

  3. AutoCAD 2007在win8.1安装出现——错误1606。无法访问网络位置Autodesk\AutoCAD2007\R17.0\chs\的解决

    环境win 8.1 64位,AutoCAD 2007 安装CAD2007,一开始安装就出错,提示:错误1606.无法访问网络位置Autodesk\AutoCAD2007\R17.0\chs\ 百度之后 ...

  4. 永久改动redhat的default route

    1,能够用route命令暂时改动: route add default gw <gateway ip> 2, 通过改动/etc/sysconfig/network 文件永久改动: 脚本: ...

  5. C#与excel互操作的错误无法将类型为“Excel.ApplicationClass”的COM 对象强制转换为接口类型“Excel._Application”

    如果您使用的电脑要操作的是office2003而之前使用过office2007使用此方法可解决您的问题 无法将类型为“Microsoft.Office.Interop.Excel.Applicatio ...

  6. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

  7. hdu 4499 Cannon dfs

    Cannon Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4499 D ...

  8. DedeCMS调用多说评论系统遇到的一些问题

    最近前端笔记加入了多说的评论,因为自带的评论太渣了.过程不是很顺利,把遇到的问题和大家分享下.我用的dedecms,所以使用的是dede的多说评论模块.效果图: 多说官方下载:http://dev.d ...

  9. mysql 加入列，改动列，删除列。

    MySQL 加入列,改动列,删除列 ALTER TABLE:加入,改动,删除表的列,约束等表的定义. 查看列:desc 表名; 改动表名:alter table t_book rename to bb ...

  10. poj3041-Asteroids , 二分图的最小顶点覆盖数 = 最大匹配数

    点击打开链接 Konig定理:二分图的最小顶点覆盖数 = 二分图的最大匹配数 题意: 在N*N的网络中有K颗小行星.小行星i的位置是(Ri, Ci).如今有一个强力的武器可以用一发光束将一整行或一整列 ...