<!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. Atitit .h5文件上传

    Atitit .h5文件上传 1. 上传原理1 2. Html1 3. Js2 4. uploadV2.js2 5. upServlet & FileUploadService {3 6. 注 ...

  2. [position]返回顶部

    position:fixed;实现 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. Decoration1：Spring-boot基础实现

    前段时间发布的Traveller项目,花费了不少精力,但是效果并不如意,根源在于瀑布式的开发思想不适合这种独立的学习项目.在项目初始就规划一个全面的web系统,,因为预设了一个前景,在心理上会想尽快看 ...

  4. CSU 1329: 一行盒子

    1329: 一行盒子 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 740  Solved: 145[Submit][Status][Web Board ...

  5. 亚信UED前端流程自动化构建工具

    亚信UED前端流程自动化构建工具 .wmd-input, .wmd-input:focus, #md-section-helper {font-size: 14px !important;line-h ...

  6. session用户账号认证（一个用户登陆，踢出前一个用户）

    在web.xml中配置: <listener> <listener-class>cn.edu.hbcf.common.listener.SessionAttributeList ...

  7. extjs经典form的submit()和ajax()

    extjs 的submit: // 发送请求                this.formPanel.getForm().submit({                            u ...

  8. Model Binding is not working. MVC3 视图模型绑定不成功

    问题出现在POST方法中,当我要将数据提交到后台的时候,绑定的变量值为null 原因是视图中的名称跟Controller中的视图的名称不一致造成的. 假如你视图中的Model采用的是Html.Labe ...

  9. YARN机制

    YARN是资源管理调度的机制,之前一直以来和MapReduce机制合在一起,之后才分开.正是因为YARN机制单独独立出来,才使得Hadoop框架更加具有普适性.MapReduce可以处理海量离线数据, ...

  10. PAT001 一元多项式求导

    题目: 设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为n*xn-1.) 输入格式:以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1000的整数).数字间以空格分隔. 输出格 ...