可以移动的块-JS特效-爱易网页

可以移动的块

日期：2014-05-18　浏览次数：20458 次

欢迎光临爱易网网页脚本特效中心，点击运行按钮演示特效：

以下是程序代码

脚本说明:
把如下代码加入<body>区域中
<SCRIPT type=text/javascript>
var dragobject = null;
var tx;
var ty;

function getReal(el) {
	temp = el;

while ((temp != null) && (temp.tagName != "BODY")) {
		if ((temp.className == "moveme") || (temp.className == "handle")){
			el = temp;
			return el;
		}
		temp = temp.parentElement;
	}
	return el;
}

function moveme_onmousedown() {
	el = getReal(window.event.srcElement)
	if (el.className == "moveme") {
		dragobject = el;
		ty = (window.event.clientY - dragobject.style.pixelTop);
		tx = (window.event.clientX - dragobject.style.pixelLeft);
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	}
	else if (el.className == "handle") {
		tmp = el.getAttribute("for");
		if (tmp != null) {
			el = eval(tmp);
			dragobject = el;
			ty = (window.event.clientY - dragobject.style.pixelTop);
			tx = (window.event.clientX - dragobject.style.pixelLeft);
			window.event.returnValue = false;
			window.event.cancelBubble = true;
		}
		else {
			dragobject = null;
		}
	}
	else {
		dragobject = null;
	}
}

function moveme_onmouseup() {
	if(dragobject) {
		dragobject = null;
	}
}

function moveme_onmousemove() {
	if (dragobject) {
		if(window.event.clientX >= 0) {
			dragobject.style.left = window.event.clientX - tx;
			dragobject.style.top = window.event.clientY - ty;
		}
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	}
}

if (document.all) { //This only works in IE4 or better
	document.onmousedown = moveme_onmousedown;
	document.onmouseup = moveme_onmouseup;
	document.onmousemove = moveme_onmousemove;
}

document.write("<style>");
document.write(".moveme		{cursor: move;}");
document.write(".handle		{cursor: move;}");
document.write("</style>");
</SCRIPT>
<STYLE type=text/css>#testDiv {
	BACKGROUND: window; BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; HEIGHT: 100px; MARGIN: 5px; POSITION: relative; WIDTH: 400px
}
#title {
	BACKGROUND: activecaption; COLOR: captiontext; FONT: caption; MARGIN: 0px; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 3px
}
#inner {
	BORDER-BOTTOM: white 2px inset; BORDER-LEFT: white 2px inset; BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; HEIGHT: 100%; MARGIN: 0px
}
#testDiv2 {
	BACKGROUND: buttonface; BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; HEIGHT: 60px; LEFT: 340px; MARGIN: 5px; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 3px; POSITION: absolute; TOP: 360px; WIDTH: 400px
}
</STYLE>
<DIV class=moveme id=testDiv2>
This is a <DIV> that you can grab anywhere<BR>This div has the 
<CODE>class="moveme"</CODE>
</DIV>

<a href="http://www.aiyiweb.com/js/">欢迎访问爱易网JS特效</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

相关资料更多>

让一让，小米4来了，碰见米粉请务必绕道走！

OPPO Find7体验测 Find7综测

首家国有独资P2P平台上线或预示政策日渐明朗

地图导航骤起杀机百度高德重新定义商业模式

一大波智能路由器正在袭来：小米、360、极路由大PK

FB上广告费用昂贵而且效果不及Twitter

优酷土豆兼并一年：依然处于烧钱形状

黑狐病毒疯传播电脑管家首推专杀工具

搜狐前副总编何毅加盟乐视任车联网公司CEO

香港全能空间香港高速云虚拟主机PHP/ASP/NET送MSSQL和MYSQL

推荐阅读更多>