超酷的鼠标可以任意拖拽的网页中的层

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

热点推荐: 英文字体人民币汇率
dw插件站长常用软件
alexa排名查询

您的位置: 网页特效 -> 鼠标键盘 -> 超酷的鼠标可以任意拖拽的网页中的层

超酷的鼠标可以任意拖拽的网页中的层

作者:admin 发布时间:2009-6-26 11:20:28 发布人: admin

<html>
<head>
<title>鼠标可以任意拖拽的层www.alixixi.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*{font-size:12px}
.dragTable{
	font-size:12px;
	border-top:1px solid #3366cc;
	margin-bottom: 10px;
	width:100%;
	background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
	cursor:move;
	color:#7787cc;
	background-color:#e5eef9;
	height:20px;
	padding-left:5px;
	font-weight:bold;
}
#parentTable{
	border-collapse:collapse;
	letter-spacing:25px;
}
</style>
<script defer>

var Drag={dragged:false,
		ao:null,
		tdiv:null,
dragStart:function(){
	Drag.ao=event.srcElement;
	if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
		Drag.ao=Drag.ao.offsetParent;
		Drag.ao.style.zIndex=100;
	}else
		return;
	Drag.dragged=true;
	Drag.tdiv=document.createElement("div");
	Drag.tdiv.innerHTML=Drag.ao.outerHTML;
	Drag.ao.style.border="1px dashed red";
	Drag.tdiv.style.display="block";
	Drag.tdiv.style.position="absolute";
	Drag.tdiv.style.filter="alpha(opacity=70)";
	Drag.tdiv.style.cursor="move";
	Drag.tdiv.style.border="1px solid #000000";
	Drag.tdiv.style.width=Drag.ao.offsetWidth;
	Drag.tdiv.style.height=Drag.ao.offsetHeight;
	Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
	Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
	document.body.appendChild(Drag.tdiv);
	Drag.lastX=event.clientX;
	Drag.lastY=event.clientY;
	Drag.lastLeft=Drag.tdiv.style.left;
	Drag.lastTop=Drag.tdiv.style.top;
},
 draging:function(){//重要:判断MOUSE的位置
	if(!Drag.dragged||Drag.ao==null)return;
	var tX=event.clientX;
	var tY=event.clientY;
	Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
	Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
	for(var i=0;i<parentTable.cells.length;i++){
		var parentCell=Drag.getInfo(parentTable.cells[i]);
		if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
			var subTables=parentTable.cells[i].getElementsByTagName("table");
			if(subTables.length==0){
				if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
					parentTable.cells[i].appendChild(Drag.ao);
				}
				break;
			}
			for(var j=0;j<subTables.length;j++){
				var subTable=Drag.getInfo(subTables[j]);
				if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
					parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
					break;
				}else{
					parentTable.cells[i].appendChild(Drag.ao);
				}	
			}
		}
	}
}
,
 dragEnd:function(){
	if(!Drag.dragged)return;
	Drag.dragged=false;
	Drag.mm=Drag.repos(150,15);
	Drag.ao.style.borderWidth="0px";
	Drag.ao.style.borderTop="1px solid #3366cc";
	Drag.tdiv.style.borderWidth="0px";
	Drag.ao.style.zIndex=1;
},
getInfo:function(o){//取得坐标
	var to=new Object();
	to.left=to.right=to.top=to.bottom=0;
	var twidth=o.offsetWidth;
	var theight=o.offsetHeight;
	while(o!=document.body){
		to.left+=o.offsetLeft;
		to.top+=o.offsetTop;
		o=o.offsetParent;
	}
		to.right=to.left+twidth;
		to.bottom=to.top+theight;
	return to;
},
repos:function(aa,ab){
	var f=Drag.tdiv.filters.alpha.opacity;
	var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
	var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
	var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
	var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
	var kf=f/ab;
	return setInterval(function(){if(ab<1){
							clearInterval(Drag.mm);
							Drag.tdiv.removeNode(true);
							Drag.ao=null;
							return;
						}
					ab--;
					tl-=kl;
					tt-=kt;
					f-=kf;
					Drag.tdiv.style.left=parseInt(tl)+"px";
					Drag.tdiv.style.top=parseInt(tt)+"px";
					Drag.tdiv.filters.alpha.opacity=f;
				}
,aa/ab)
},
 inint:function(){//初始化
	for(var i=0;i<parentTable.cells.length;i++){
		var subTables=parentTable.cells[i].getElementsByTagName("table");
		for(var j=0;j<subTables.length;j++){
			if(subTables[j].className!="dragTable")break;
			subTables[j].rows[0].className="dragTR";
			subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
		}
	}
	document.onmousemove=Drag.draging;
	document.onmouseup=Drag.dragEnd;
}
//end of Object Drag
}
Drag.inint();
function _show(str){
	var w=window.open('','');
	var d=w.document;
	d.open();
	str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
	str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
	str=str.replace(/\r/g,"<br />\n");
	d.write(str);
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="10" width="100%" height="500" id="parentTable">
<tr>
	<td width="25%" valgin="top">
		<table border="0" class="dragTable" cellspacing="0">
			<tr>
				<td><b>Webjx.Com</b></td>
			</tr>
			<tr>
				<td>中国建站是一家专业的网页教学站点，该站内容更新快！文章教程实用性强！是一个网页爱好者常去的站点！111111111111111111111111</td>
			<tr>
		</table><table border="0" class="dragTable" cellspacing="0">
			<tr>
				<td>中国建站2</td>
			</tr>
			<tr>
				<td>中国建站是一家专业的网页教学站点，该站内容更新快！文章教程实用性强！是一个网页爱好者常去的站点！222222222222222222</td>
			<tr>
		</table>
		<table border="0" class="dragTable" cellspacing="0">
			<tr>
				<td>中国建站3</td>
			</tr>
			<tr>
				<td>中国建站是一家专业的网页教学站点，该站内容更新快！文章教程实用性强！是一个网页爱好者常去的站点！333333333333333333333333333333</td>
			<tr>
		</table>
	</td>
	<td width="25%">
		<table border="0" class="dragTable" cellspacing="0">
			<tr>
				<td>中国建站4</td>
			</tr>
			<tr>
				<td>中国建站是一家专业的网页教学站点，该站内容更新快！文章教程实用性强！是一个网页爱好者常去的站点！444444444444444444444444444</td>
			<tr>
		</table></td>
	<td width="25%">
		<table border="0" class="dragTable" cellspacing="0">
			<tr>
				<td>中国建站5</td>
			</tr>
			<tr>
				<td>中国建站是一家专业的网页教学站点，该站内容更新快！文章教程实用性强！是一个网页爱好者常去的站点！5555555555555555555555555</td>
			<tr>
		</table>		<table border="0" class="dragTable" cellspacing="0">
			<tr>
				<td>中国建站6</td>
			</tr>
			<tr>
				<td>中国建站是一家专业的网页教学站点，该站内容更新快！文章教程实用性强！是一个网页爱好者常去的站点！666666666666666666666666666666</td>
			<tr>
		</table>
	</td>
</tr>
</table>
<input type="button" value="SHOW" onclick="_show(document.documentElement.innerHTML)"/>
</body>
</html>

超酷的鼠标可以任意拖拽的网页中的层

将本文收藏到QQ书签与更多好友分享

上一篇：文章：控制鼠标中间滚轮的特效代码下一篇：文章：感应鼠标移动方向