<!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. NGUI ScrollView中MoveRelative,Scroll的区别

    Scroll会计算边界,和直接拖拽的效果类似 MoveRelative不计算边界,超出边界了也不会管,也不会应用缓动效果

  2. vivado error [Labtools 27-2149]

    使用vivado2014.3时遇到了这种错误 ERROR: [Labtools 27-2149] File E:/project/V7_PCIE/prj/PhasedProject/M_PcieGen ...

  3. (4)Smali系列学习之Smali语法详解内部类

    在这一节,我们来介绍一下内部类.对于Java文件中的每一个内部类,都会产生一个单独的smali文件,比如ActivityThread$1.smali.这些文件的命名规范是如果是匿名内部类,则命名规则是 ...

  4. 【ZT】NUMA架构的CPU -- 你真的用好了么？

    本文从NUMA的介绍引出常见的NUMA使用中的陷阱,继而讨论对于NUMA系统的优化方法和一些值得关注的方向. 文章欢迎转载,但转载时请保留本段文字,并置于文章的顶部 作者:卢钧轶(cenalulu) ...

  5. hdoj 1053 Entropy（用哈夫曼编码）优先队列

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1053 讲解: 题意:给定一个字符串,根据哈夫曼编码求出最短长度,并求出比值. 思路:就是哈夫曼编码.把 ...

  6. jsp tld的function 自定义方法扩展

    引入方式示例: <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> 写法示例: <? ...

  7. ID4收藏

    IdentityServer4.Admin https://github.com/skoruba/IdentityServer4.Admin

  8. angular 输入属性@Input , 输出属性@Output , 中间人模式

    1 输入属性 通常用于父组件向子组件传递信息 举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order 首先在app.order.component.ts中声明需要由父组件传 ...

  9. 【实验一 】Spring Boot 集成 hibernate & JPA

    转眼间,2018年的十二分之一都快过完了,忙于各类事情,博客也都快一个月没更新了.今天我们继续来学习Springboot对象持久化. 首先JPA是Java持久化API,定义了一系列对象持久化的标准,而 ...

  10. JobTracker作业调度分析

    转自:http://blog.csdn.net/Androidlushangderen/article/details/41408517 JobTracker的作业调度给我感觉就是比较宏观意义上的操作 ...