返回首页

温馨提示：本站文章标题使用的字体是《微软雅黑》点击下载这个字体.

顶一下

1 次

封装的一个拖拽类【类似于祝福墙】

来源：本站原创编辑：admin 时间：2009年02月06日浏览：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>drag layer</title>
	<script type="text/javascript">
	//拖拽封包	
		var dragLayer =
		{
			start:function(e)
			{	
				var e = e ? e:window.event ;		
				if(window.ActiveXObject)
				{
					var obj = e.srcElement;
				}
				else
				{
					var obj = e.target;
				}	
				obj = obj.parentNode;
				dragLayer.startX = parseInt(e.clientX) - parseInt(obj.offsetLeft);
				dragLayer.startY =parseInt(e.clientY) - parseInt(obj.offsetTop);
				dragLayer.target = obj;
				document.onmousemove = dragLayer.move;	
				document.onmouseup = dragLayer.end;		
			},
			move:function(e)
			{	
				var e = e ? e:window.event ;
	
				ex = parseInt(e.clientX) - dragLayer.startX;
				ey =parseInt(e.clientY) - dragLayer.startY;		
				dragLayer.target.style.left = ex + 'px';
				dragLayer.target.style.top = ey + 'px';	
				dragLayer.target.style.border="1px dashed #ff9900";		
				dragLayer.target.style.zIndex=2;
			},
			end:function()
			{				
				dragLayer.target.style.zIndex=1;
				dragLayer.target.style.border="1px solid #BFBFBF";	
				document.onmousemove =function(){return false;};
			}		
		}	
			
	function addLayer(left,top)
	{
		var left= Math.random(90)*left;
		var top= Math.random(5)*top;
		var inHtml = '<div  class="box" style="left:'+ left+'px; top:'+ top +'px;z-index:1;"><div id="aa" name="aa" class="title"><strong>X</strong> </div><div class="content"></div></div>';
		document.body.innerHTML+=inHtml;
		getDiv = document.getElementsByName('aa');
		for(var i=0;i<getDiv.length;i++)
		{
			getDiv[i].onmousedown = dragLayer.start;
			//alert(getDiv[i].childNodes[0].tagName);
			getDiv[i].childNodes[0].onclick = function()
			{
				this.parentNode.parentNode.style.display='none';				
			}
		}
	}	
		
		
	window.onload = function()
	{	
		
		getDiv = document.getElementsByName('aa');
		for(var i=0;i<getDiv.length;i++)
		{
			getDiv[i].onmousedown = dragLayer.start;			
			getDiv[i].childNodes[0].onclick = function(){alert(this.parentNode.parentNode.tagName);this.parentNode.parentNode.style.display='none'}	
		}
	}
	
	</script>
	<style type="text/css">
		*{margin:0;padding:0;}
		body{font-size:12px; font-family:Arial, Helvetica, sans-serif;color:#333;}
		.box{width:300px;border:1px solid #BFBFBF; height:130px; position:absolute;top:50px; left:200px; background:#FFF;}
		.title{height:25px; line-height:25px; border-bottom:1px solid #BFBFBF; cursor:move; background:#F9F9F9; text-align:right;}
		.title strong{font-size:14px; padding-right:8px;font-family:Tahoma, Geneva, sans-serif; color:#999; cursor:pointer;}				
	</style>
</head>
<body>
	<input type="button" name="addLayer" title="add" value="添加一个层" onclick=addLayer(900,550); />
	<div  class="box" style="left:160px; top:120px;z-index:1;">
		<div id="aa" name="aa" class="title"><strong>X</strong> </div>
		<div class="content">站长素材-专注于网页素材下载-www.web265.com</div>
	</div>
	
	<div  class="box" style="left:397px; top:190px;z-index:2;">
		<div id="aa" name="aa" class="title"><strong>X</strong> </div>
		<div class="content">本代码由<a href="http://www.web265.com" target="_blank">站长素材(http://www.web265.com)</a>整理发布</div>
	</div>
	
	<div  class="box" style="left:254px; top:278px;z-index:2;">
		<div id="aa" name="aa" class="title"><strong>X</strong> </div>
		<div class="content">本代码由<a href="http://www.web265.com" target="_blank">站长素材(http://www.web265.com)</a>整理发布</div>
	</div>
	
</body>
</html>本代码由<a href="http://www.web265.com" target="_blank">站长素材网(http://www.web265.com)</a>整理发布

运行代码
复制代码
另存代码
收藏本页

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

上一篇：可左右平滑滚动的产品展示效果(适合做产品图片)

下一篇：让焦点自动跳转,类似于填写IP

赞助商友情链接

站长常用工具

更多

返回首页

封装的一个拖拽类【类似于祝福墙】

赞助商友情链接

站长常用工具

相关文章