JavaScript DOM编程艺术—javascript实现移动元素动画

原创 2015年11月19日 08:55:57

将文档中的某个元素摆放到特定位置,并设置其移动至指定位置。

test.html

<!doucment html>
<html>
<body>
	<p id="message">Wheel!</p>
<script type="text/javascript" src="addLoadEvent.js"></script>
<script type="text/javascript" src="moveMessage.js"></script>
</body>
</html>

addLoadEvent.js

function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof oldonload != 'function'){
		window.onload= func;
	}
	else{
		oldonload();
		func();
	}
}

moveMessage.js

addLoadEvent(positionMessage);
//将元素指定到某个位置
function positionMessage(){
	var elem = document.getElementById('message');
	elem.style.position = "relative";
	elem.style.left="20px";
	elem.style.top="50px";
	elem.style.fontColor="red";
	moveMessage("message",200,100,10)
}
//将移动元素函数抽象
function moveMessage(elementID,end_x,end_y,interval){
	var elem = document.getElementById(elementID);
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	if(xpos == end_x &&ypos == end_y){
		return true;
	}
	if(xpos < end_x){xpos++;}
	if(xpos > end_x){xpos--;}
	if(ypos < end_y){ypos++;}
	if(ypos > end_y){ypos--;}
	elem.style.left = xpos + "px";
	elem.style.top = ypos + "px";
	var repeat = "moveMessage('"+elementID+"',"+end_x+","+end_y+","+interval+")";
	movement = setTimeout(repeat,interval);
}


版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery点击按钮元素移动(动画)

jQuery 点击按钮元素移动(动画) .box1{ width: 100px; height: 1...
  • yangxh11111
  • yangxh11111
  • 2016年12月08日 16:30
  • 227

JS移动某些元素到指定位置

一、点击按钮实现页面中的某些元素移动到 指定区域(根据用户输入)/ 规定区域(代码中写死的) 通过 document.getElementById("demo").appendChild(docum...
  • MOONCOM
  • MOONCOM
  • 2017年06月15日 16:05
  • 2109

JS拖拽元素原理及实现代码

拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的。下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一、拖拽的流程动作 ①鼠标按下 ②鼠标移动 ...
  • qczxl
  • qczxl
  • 2015年12月03日 13:38
  • 8384

采用纯js方式实现网页DIV元素的动态拖动及位置移动操作程序

  • 2008年09月18日 15:52
  • 777B
  • 下载

拖拽、移动元素的JS原生函数

oDiv.onmousedown = function (ev) {                 var ev = ev || window.event;                 di...
  • FireBird_one
  • FireBird_one
  • 2017年04月18日 11:14
  • 291

DOM操作——怎样添加、移除、移动、复制、创建和查找节点

(1)创建新节点       createDocumentFragment()    //创建一个DOM片段       createElement_x_x()   //创建一个具体的元素...
  • Rachel8023
  • Rachel8023
  • 2016年07月23日 10:54
  • 2807

玩转HTML5移动页面(动效篇)

作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,...
  • hsany330
  • hsany330
  • 2015年07月27日 10:40
  • 1622

(Javascript经典案例) -- 捕获鼠标点击位置并将元素移动到该位置

捕获鼠标点击位置并将元素移动到该位置 ---Javascript经典案例 ,不支持ie7--对style使用了setAttribute,查看源码,F12(注释详细解答)...
  • u012918421
  • u012918421
  • 2015年11月15日 22:10
  • 549

<html5+css3+js>用javascript显示隐藏,添加,删除元素,css动画效果

(《javascript&jquery交互式web前端开发》学习记录) HTML5: To Do List ListKing Buy Groceries fresh ...
  • qq_17615475
  • qq_17615475
  • 2015年12月18日 08:18
  • 2237

jq简单移动动画效果

$(document).ready(function(){ $("button[type=button]").click(function (){ //单击按钮执行动画 va...
  • u014185792
  • u014185792
  • 2014年03月20日 09:42
  • 1317
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript DOM编程艺术—javascript实现移动元素动画
举报原因:
原因补充:

(最多只允许输入30个字)