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

可以移动的块

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

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

以下是程序代码

脚本说明:
把如下代码加入<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周鸿祎曾试图阻止百度收购91无线

谷歌安卓全球副总裁为何跳槽中国企业小米？

阿里巴巴IPO难掩的四个现实问题：天猫销售额成谜、淘宝拖后腿、营收迅猛其他不行和投资者未必买账

聚美优品获基石投资1.5亿美金，IPO吃下定心丸

传4G牌照国庆节前后发放 TD-LTE制式优先

诺基亚培育低端机市场迂回战术要挟中华酷联

移动联通回应税率改革：短期内收入利润将大减

搜房网遭遇做空利益保送成“猎杀”焦点

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

推荐阅读更多>