<!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. props 和 state的区别

    作者:孙志勇 微博 日期:2016年11月29日 一.时效性 所有信息都具有时效性.文章的价值,往往跟时间有很大关联.特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时 ...

  2. Eclipse调试Java的10个技巧

    原文地址: http://www.oschina.net/question/82993_69439 在看这篇文章前,我推荐你看一下Eclipse 快捷键手册,我的eclipse版本是4.2 Juno. ...

  3. Jdk和Jre目录和三个lib目录说明----外部扩展jar包servlet，mysql，oracle等

    以下文章转载自a personal blog:For Future,因为昨天下午在cmd模式下编译servlet失败,后来在网上找到这篇文章帮我解决了该问题,我觉得挺值得收藏的,并且这篇文章对&quo ...

  4. 整合spring roo，maven,mybatis,spring-flex,blazeds,mysql

    1.      下载spring roo,设置环境变量ROO_HOME,和path,classpath. 使用CMD命令行找到工作区间,新建工程目录转到工程目录:mkdir ten-minutes $ ...

  5. PL/pgSQL学习笔记之七

    http://www.postgresql.org/docs/9.1/static/plpgsql-declarations.html 如果一个PL/pgSQL函数声明了输出参数,输出参数被赋予$n名 ...

  6. Unity实现相似于安卓原生项目的点击安卓返回button回到前一页的功能

    本章博主和大家一起讨论下Unity怎么实现类似安卓原生项目,点击安卓返回button实现返回到前一个页面的功能. 1.定义一个泛型用于响应安卓的返回button public static List& ...

  7. Fitness training

    2014-01-14 第一次跑步,结束后大腿酸. 2014-01-15 第二次跑步,跑的过程中臀部酸痛,结束后大腿酸痛. 已经进行跑步8次了,后6次,每次3000米 2014-02-06  plank ...

  8. Html Agility Pack基础类介绍及运用

    第一篇只对Html Agility Pack做了一个大概的介绍,在接下来的章节会比较深入的介绍Html Agility Pack. Html Agility Pack 源码中的类大概有28个左右,其实 ...

  9. [转]Oracle快速入门

    原文出处:http://blog.csdn.net/yueguanghaidao/article/details/7019377 select * from scott.salgrade; /*解锁s ...

  10. 基于jQuery标题有打字效果的焦点图

    给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...