<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <title>Animation</title>

  <script type="text/javascript">

function positionMessage() {

  if (!document.getElementById) return false;

  if (!document.getElementById("message")) return false;

  var elem = document.getElementById("message");

  elem.style.position = "absolute";

  elem.style.left = "50px";

  elem.style.top = "100px";

  movement = setTimeout("moveMessage()",5000);

}

function moveMessage() {

  if (!document.getElementById) return false;

  if (!document.getElementById("message")) return false;

  var elem = document.getElementById("message");

  var xpos = parseInt(elem.style.left);

  var ypos = parseInt(elem.style.top);

  if (xpos == 200 && ypos == 100) {

    return true;

  }

  if (xpos < 200) {

    xpos++;

  }

  if (xpos > 200) {

    xpos--;

  }

  if (ypos < 100) {

    ypos++;

  }

  if (ypos > 100) {

    ypos--;

  }

  elem.style.left = xpos + "px";

  elem.style.top = ypos + "px";

  movement = setTimeout("moveMessage()",10);

}

function addLoadEvent(func) {

  var oldonload = window.onload;

  if (typeof window.onload != 'function') {

    window.onload = func;

  } else {

    window.onload = function() {

      oldonload();

      func();

    }

  }

}

addLoadEvent(positionMessage);

  </script>

</head>

<body>

  <p id="message">Whee!</p>

</body>

</html>

JS改变HTML元素的绝对坐标的更多相关文章

  1. js改变HTML元素的值

    js改变HTML元素的值(常用,备忘) <!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h ...

  2. 用JS改变的元素CSS样式，css里display :none 隐藏 block 显示

    CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...

  3. js 改变页面元素的内容

    改变页面标签里的内容 (方法) innerText innerHTML (常用)   代码示例 <div></div> <p> 我是文字 <span>1 ...

  4. js改变数组的两个元素的位子，互换、置顶

    //js数组的元素上移和下移动 var fieldData=[ {name:'id',value:'ID'} , {name:'username',value:'用户名'} , {name:'emai ...

  5. js清除节点内容（改变标签元素）

    <!DOCTYPE HTML><html> <head>        <meta http-equiv="Content-Type" c ...

  6. js获取元素的页面坐标

    一.DOM中各种宽度.高度 二.DOM中的坐标系 JS获取div元素的宽度 offsetWidth=width+padding-left+padding-right+border-left+borde ...

  7. js动态改变img元素src在IE无效的问题

    做了个验证码功能,需要做个点击改变验证码图片的功能,使用js改变img的src,代码如下 $("#cerificationCodeImg").attr("src" ...

  8. 【问题】js 改变鼠标样式，chrome浏览器不能立即更新，暂没有解决办法

    元素的css,cursor可以改变鼠标样式.也就是鼠标放到元素上去时,改变为相应状态. 通过JS改变cursor时,我发现chrome浏览器不能立即更新,需要动一下鼠标才行,试了几个其它浏览器都是立即 ...

  9. JS改变input的value值不触发onchange事件解决方案 （转）

    方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

随机推荐

  1. 安装VS2010 SP1后，再安装mvc3

    安装VS2010 SP1后,再安装mvc3会报错,估计原因是此安装包会安装VS的补丁,而sp1的补丁版本高过此安装包的. AspNetMVC3ToolsUpdateSetup.exe 解决办法: 运行 ...

  2. Springboot client 常用配置详解

    Property name Description Default value spring.boot.admin.client.enabled Enables the Spring Boot Adm ...

  3. twemproxy源码分析1——入口函数及启动过程

    最近工作中需要写一个一致性哈希的代理,在网上找到了twemproxy,结合网上资料先学习一下源码. 一.Twemproxy简介 Twemproxy是memcache与redis的代理,由twitter ...

  4. 1.2 Activity

    Activity是个应用组件,它给用户提供了为了完成某些工作而可以进行交互操作的界面,例如,电话详情,打电 话,发邮件,或是浏览地图.每一个Activity都有一个窗口来绘制自已的用户界面.通常来说, ...

  5. Activiti(一)--安装配置具体解释

    有一段时间没有更新文章了,尽管有一直在写文章,但是一直没有更新到博客内,这段时间写的文章大多还是以技术为主. 接下来的系列文章将会来讨论企业工作流的开发,主要是来研究开源工作流Activiti的使用. ...

  6. spring+mybatis+javafx

    @Service用于标注业务层组件 @Controller用于标注控制层组件(如struts中的action) @Repository用于标注数据访问组件,即DAO组件. @Component泛指组件 ...

  7. 爬虫（2）- HTTP和HTTPS 相关知识

    HTTP和HTTPS HTTP协议(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收 HTML页面的方法. HTTPS(Hypertext Transfer ...

  8. RTP时间戳

    http://xingyunbaijunwei.blog.163.com/blog/static/7653806720126121014111/ ——————————————————————————— ...

  9. thinkphp 读取页面报错 说 /Runtime/Cache/Home/XXXXXX.php 错误

    thinkphp _STORAGE_WRITE_ERROR_:./Runtime/Cache/Home/xxxx.php 这一种报错一般是在linux 才会出现的错误,因为是权限问题.把Home文件加 ...

  10. CI 框架购物车问题

    因为CI 是外国的框架.购物逻辑和中国的不一样.所以需要改进ci 框架的 cart 类: (1)先把 cart类拷贝一份到application/libaries/下 (2)因为cart中购车中的商品 ...