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

可以移动的块

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

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

以下是程序代码

脚本说明:
把如下代码加入<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 全部选择提示：你可先修改部分代码，再按运行]

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

相关资料更多>

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

华为美国推出电商网站发售Mate 2LTE版

阿里入股虎嗅：媒体的脊梁弯了？未必！

清点：罗永浩推锤子ROM 小米打法遭模拟

微软史上最大规模裁员，一半诺基亚员工

解析2014年阿里百度等五大互联网巨头深度布局

IT时代周刊总编辑曹健：投资人刘志硕印象记

同程旅游融资后变土豪如何烧钱占领市场？

公信力消失：马航事件社交媒体传播之痛

香港云服务器免备案云主机VPS 国内独立IP 独享15M 月付SSD

推荐阅读更多>