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

可以移动的块

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

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

以下是程序代码

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

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

相关资料更多>

传搜狗估值12亿美元与360谈判进入白热化

王建宙解构OTT效劳中移动重塑飞信平台

中移动“重启”自有品牌手机成败难料

三问刘强东：京东为何近来火气这么大？

诺基亚再缩阵线封锁上海旗舰店全力蜕变

神州电脑中止IPO面前：再被质疑财务造假

三大运营商合建铁塔公司真相:未涉及电信业重组

微信收费形式三选一腾讯或变身运营商

阿里巴巴上市后雅虎将面临更大的业绩压力

网站建设一条龙做网站网站制作网站定制企业网站设计特价

推荐阅读更多>