<!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. Jetty - Container源码分析

    1. 描述 Container提供管理bean的能力. 基于Jetty-9.4.8.v20171121. 1.1 API public interface Container { // 增加一个bea ...

  2. Android图片二级缓存

    点击下载源代码 想起刚開始写代码的时候,领导叫我写一个头像下载的方法,当时屁颠屁颠就写了一个图片下载的,每次都要去网络上请求,最后直接被pass掉了 当时的思路是这种 后来渐渐地就知道了有二级缓存这东 ...

  3. 170. Rotate List【medium】

    Given a list, rotate the list to the right by k places, where k is non-negative.   Example Given 1-& ...

  4. CMSGC造成内存碎片的解决方法

    我们知道,CMSGC在老生代回收时产生的内存碎片会导致老生代的利用率变低:或者可能在老生代总内存大小足够的情况下,却不能容纳新生代的晋升行为(由于没有连续的内存空间可用),导致触发FullGC.针对这 ...

  5. maven学习资料

    maven学习资料 maven学习教程:What.How.Whyhttp://www.flyne.org/article/167 Maven 那点事儿 https://my.oschina.net/h ...

  6. 错误 1 error C4996: 'scanf': This function or variable may be unsafe. Consider using scanf_s instead

    错误简介 在VS 2012 中编译 C 语言项目,如果使用了 scanf 函数,编译时便会提示如下错误: 原因是Visual C++ 2012 使用了更加安全的 run-time library ro ...

  7. Ubuntu SVN服务器的搭建与配置（转）

    Ubuntu SVN服务器的搭建与配置 一.         安装 sudo apt-get install subversion sudo apt-get install libapache2-sv ...

  8. 在Linux系统上查看Apache服务器的错误日志

    错误日志和访问日志文件为系统管理员提供了有用的信息,比如,为 Web 服务器排障,保护系统不受各种各样的恶意活动侵犯,或者只是进行各种各样的分析以监控 HTTP 服务器.根据你 Web 服务器配置的不 ...

  9. [转]OpenMP中的private/firstprivate/lastprivate/threadprivate之间的比较

    转自:http://blog.csdn.net/gengshenghong/article/details/6985431 private/firstprivate/lastprivate/threa ...

  10. Hive学习笔记——基本配置及测试

    1.什么是Hive Hive 是建立在 Hadoop上的数据仓库基础构架.它提供了一系列的工具,可以用来进行数据提取转化加载(ETL),这是一种可以存储.查询和分析存储在Hadoop中的大规模数据的机 ...