javascript实现拖拽与自由移动的有关问题-JavaSript-爱易网页

javascript实现拖拽与自由移动的有关问题

日期：2014-05-16　浏览次数：20454 次

javascript实现拖拽与自由移动的问题
题目要起得有技术含量?
貌似太短了..来不及想
内容是一个刚学几天的js菜鸟蛋疼的问题.

这个问题困扰我挺长时间了
我也是为了让自己能不浪费时间写了个东西玩
具体文章在我空间
http://bbs.blackbap.org/space-uid-2606.html
也是很蛋疼的卡在一个地方,所以在想是不是先转入后台程序开发?

自由移动实现成功了,很简单的漂浮广告的原理,在在上面链接的文章中也有不能再详细的注释

然后在实现拖拽的时候出了问题
拖拽功能写好了
但是在合在一起的时候就蛋疼了
本来自由移动的青年被拖拽了一下以后就不动了~!
纠结...
所来让各位大牛来看看啦

下面附上源码给大家看
//--------------------------这个是html的----------------------------//

<html>

<head>

<title>凉宫跑来跑去喵~</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

</head>



<body>

<DIV id="div1"

style="Z-INDEX: 100; 

	LEFT: 2px; 

	WIDTH: 120px; 

	POSITION: absolute;	

	TOP: 43px; 

	HEIGHT: 120px;

	visibility: visible;">

	

	

		<img id="img1"

		src="bg.jpg" 

		border="0"

        height="130"

        width="130"

        onMouseDown="EIFaction()"

        draggable="false"

		/>

	

	

</DIV>



<SCRIPT src="js.js"></SCRIPT>

</body>

</html>

//--------------------html----------------------------//

//------------------------这个是js-----------------------------//

var EIFx = 300;//EIF初始X坐标

var EIFy = 200;//EIF初始Y坐标

var speed = 30; //计时器参数

var step = 1;//精灵移动速度

var Ylimit = 0;//Y坐标极限范围

var Xlimit = 0;//X坐标极限范围

var Xc = true;//X反向移动参数

var Yc = true;//Y反向移动参数

var EIFh = 0;//EIF身高

var EIFw = 0;//EIF肥胖~卖个萌嘿嘿

var Timer;//计时器



window.onload = function(){



img1.visibility = "visible";//设置img1元素为可见;

Timer = setInterval('EIFmove()', speed);//设置interval代表计时器,并设置周期为speed值,每周期执行一次EIFmove()

Xlimit = document.body.clientWidth;//获取body宽度;

Ylimit = document.body.clientHeight;//获取body高度;

EIFh = div1.offsetHeight;

EIFw = div1.offsetWidth;







    var oDiv = document.getElementById('div1')

	oDiv.onmousedown = function (){

		

		document.getElementById('img1').src="over.gif"



		document.onmousemove =function (ev){

		 var oEvent = ev || event

		 left=oDiv.style.left = oEvent.clientX+'px';

		 top=oDiv.style.top = oEvent.clientY+'px';

		 EIFx=left;

		 EIFy=top;

	   }

	   document.onmouseup = function ()

	   {

		   document.onmousemove = null;

		   document.getElementById('img1').src="bg.jpg"



	   }



	}



}





function EIFmove() 

{

	div1.style.left = EIFx + document.body.scrollLeft;

	div1.style.top = EIFy + document.body.scrollTop;

	

	if (Yc) 

		{EIFy = EIFy + step;}

	else 

		{EIFy = EIFy - step;}

	

	if (EIFy < 10) 

		{Yc = true;EIFy =&

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

javascript实现拖拽与自由移动的有关问题

相关资料更多>

推荐阅读更多>