自己用jQuery实现的元素移动（待调试）

最新推荐文章于 2020-07-01 17:56:38 发布

manbujingxin

最新推荐文章于 2020-07-01 17:56:38 发布

阅读量1.1k

点赞数

分类专栏： web开发文章标签： jquery distance function null div

本文链接：https://blog.csdn.net/manbujingxin/article/details/6762291

版权

web开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

function moveDiv(objId,to_x,to_y) { 
	testDiv = document.getElementById(objId);
    if(testDiv == null)  
        return;  
    
    var from_x = parseInt(testDiv.style.left);
   // alert("sometext: "+testDiv.style.left);
    var from_y = parseInt(testDiv.style.top);
	var distance_x = to_x-from_x;
	var distance_y = to_y-from_y;
	if(abs(distance_x) >= abs(distance_y)) {
		var max_distance = abs(distance_x);
	} else {
		var max_distance = abs(distance_y);
	}
	//计算x,y每次移动的相对距离
	var move_x = distance_x/max_distance;
	var move_y = distance_y/max_distance;
	var i = 1;
	while(i =< max_distance) {
		//计算x,y每次到达的位置
		var step_x = from_x + i*move_x+"px";
		var step_y = from_y + i*move_y+"px";
		$('#'+objId).animate({left:step_x});
		$('#'+objId).animate({top:step_y});
		i++;
	}*/
}

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="move.js"></script>
<style type="text/css">
#div{
background-color:#6495ed;
left:10px;
top:20px;
height:100px;
width:100px;
position:absolute;
}
</style>
<head>
<body>
<div id="div">this is the div</div>
<button οnclick="moveDiv('div',500,800)" >Move</button>   
</body>
</html>