<!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. WebSocket遇到的一些问题

    一 .Nginx配置websocket   为了解决Nginx转发不能进行websocket通信问题 将nginx配置文件添加如下内容:   map $http_upgrade $connection ...

  2. Atitit.软件开发的几大规则，法则，与原则p821.doc

    Atitit.软件开发的几大规则,法则,与原则p821.doc 1. 设计模式六大原则2 1.1. 设计模式六大原则(1):单一职责原则2 1.2. 设计模式六大原则(2):里氏替换原则2 1.3.  ...

  3. Sublime Text 2 入门与总结

    Sublime Text 2 入门与总结   首语 :    考完试,但又没什么兴趣做课程设计,蛋疼的弄点软件入门的介绍,希望给各位还在吃香蕉的程序猿带来一点启示...   代码编辑器,就像武侠中的武 ...

  4. [na] centos如何通过vmware Windows共享文件

    参考 自我感觉都会使用Windows中的文件.在Windows与linux之间互传文件是一个问题.本方法介绍的是在linux下挂载Windows共享文件夹的方法来实现的 首先安装VMware Tool ...

  5. Codeforces Round #238 (Div. 2) D. Toy Sum

    D. Toy Sum   time limit per test:1 second memory limit per test:256 megabytes input:standard input o ...

  6. oracle字符存储

     substr和substrb 以前知道有substrb,lengthb等函数,也知道它们是以byte来计算长度,可没用过,也不太明白什么地方需要用到它们.一直就是用substr,length,以 ...

  7. java -jar Incompatible argument to function

    原因分析:jar包版本问题 解决方法:到工程中查看代码引用的jar包版本是多少,然后升级jar包,就可以了!

  8. pycharm 社区版

    这个是免费版.到3.1.13 http://pan.baidu.com/s/1bnvPdtt 没用过idea的商业版,不知道为什么它的更新那么蛋疼,不能增量更新,每次都得手动下载完整的压缩包.

  9. [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:600)

    Could not fetch URL https://pypi.python.org/simple/six/: There was a problem confirming the ssl cert ...

  10. Pyscripter 不能正确调用另一文件中模块的问题的解析(Internal Engine 和 Remote Engine)

    背景 Pyscripter是python下一个非常流行的开源IDE,笔者一直使用Pyscripter来来编写python脚本. 关于IDE的一些特性本文不在赘述,主要是分享一下今天遇到的一个问题. 问 ...