每日更新|TOP排行榜|Tag标签|充值

无忧首页网页模板程序模板建站教程视频教程网页特效图标素材字体下载站长工具站长问答

网页特效代码模板无忧>网页特效>层和布局特效代码>

收藏分享查看评论层和布局

JavaScript层拖动函数，很实用_层和布局特效

查看演示效果

特效Tag：层拖动添加

一个基于JS的层拖动函数代码，很实用，附有函数参数说明，使用时候你只需简单设置一下参数就可以了。弹出的层可以拖动，也可以关闭，层的标题、内容、长度、高度以及初始弹出位置都可以设定。

<script type="text/javascript">
/***************************************
Descrīption: 可拖动窗口
Version: 1.0
Author: Olin
Last modify: 2008-10-6
Author web: http://liaoliaoba.cn
Author mail: olinweb@126.com
*****************************************/
function getEvent() //同时兼容ie和ff的写法
{  
        if(document.all)   return window.event;    
        func=getEvent.caller;        
        while(func!=null)
		{  
            var arg0=func.arguments[0];
            if(arg0)
            {
              if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
              {  
              return arg0;
              }
            }
            func=func.caller;
        }
        return null;
}
//t是标题，msg是需要显示在窗口中的信息或者HTML代码
function drag_window(t,msg,w,h,x,y)
{
	var top=y,left=x;
	var moveable=false; 
	var msgw,msgh,titleheight,bordercolor;
    msgw=w;//窗口的宽度
    msgh=h;//窗口的高度
    titleheight=18 //提示窗口标题高度
    bordercolor="#336699";//提示窗口的边框颜色
	
	t = "<span style='float:left'>"+t+"</span>";
	
	var msgObj=document.createElement("div");
	msgObj.setAttribute("id","msgDiv");
    msgObj.style.background="white";
    msgObj.style.border="1px solid " + bordercolor;
    msgObj.style.position = "absolute";
    msgObj.style.left = left + "px";
    msgObj.style.top = top + "px";
	msgObj.style.width = msgw + "px";
    msgObj.style.height =msgh + "px";
	msgObj.style.zIndex = "1000";
	
	var title=document.createElement("h4");
    title.setAttribute("id","msgTitle");
    title.setAttribute("align","right");
    title.style.margin="0";
    title.style.padding="3px";
    title.style.background=bordercolor;
    title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
    title.style.opacity="0.75";
    title.style.border="1px solid " + bordercolor;
    title.style.height=titleheight+"px";
	title.innerHTML = t;

var msgdiv = document.createElement("div");
	msgdiv.setAttribute("id","msg_mrc");
	msgdiv.innerHTML = msg;
	
	var close_button=document.createElement("span");
	close_button.setAttribute("id","msgClose");
	close_button.style.padding="2px";
    close_button.style.border="1px outset " ;
    //close_button.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
    close_button.style.color="white";
    close_button.style.cursor="pointer";
	close_button.innerHTML = "关闭";
	
	close_button.onclick=function()
	{
		document.getElementById("msgTitle").removeChild(close_button);
		document.getElementById("msgDiv").removeChild(title);
		document.getElementById("msgDiv").removeChild(msgdiv);
		document.body.removeChild(msgObj);
    }
	
	title.onmousedown=function()
	{
		var e = getEvent();
		if (document.all)
		{
			document.getElementById("msgTitle").setCapture(); 
		}
		else
		{
			window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
		}
		document.getElementById("msgTitle").style.cursor="move";
		x = document.all?e.clientX:e.pageX;
		y = document.all?e.clientY:e.pageY; 
		left = parseInt(document.getElementById("msgDiv").style.left);
		top = parseInt(document.getElementById("msgDiv").style.top);
		moveable = true; 
		document.onmousemove=function()
		{
			if(moveable)
			{
				var e = getEvent();
				var chat_window = document.getElementById("msgDiv");
				var newleft = left + (document.all?e.clientX:e.pageX) - x;
				var maxleft = (parseInt(document.body.clientWidth)-parseInt(chat_window.style.width));
				var newtop = top + (document.all?e.clientY:e.pageY) - y;
				var maxtop = (parseInt(document.body.clientHeight) - parseInt(chat_window.style.height));
				chat_window.style.left = (newleft>0&&newleft<maxleft?newleft:(newleft>0?maxleft:0)) + "px";
				chat_window.style.top = (newtop>0&&newtop<maxtop?newtop:(newtop>0?maxtop:0)) + "px";
			} 
		};
		document.onmouseup=function()
		{
			if(moveable)
			{ 
				if (document.all)
				{
					document.getElementById("msgTitle").releaseCapture(); 
				}
				else
				{
					window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
				}
				document.getElementById("msgTitle").style.cursor="default";
				moveable = false; 
			}
		};
	};
	document.body.appendChild(msgObj);
    document.getElementById("msgDiv").appendChild(title);
	document.getElementById("msgTitle").appendChild(close_button);
	document.getElementById("msgDiv").appendChild(msgdiv);
}
</script>

<a href="#" onClick="drag_window('标题栏','这是一个可拖动的层',300,200,100,100)">创建拖动层</a>
<pre>
函数说明：drah_window(t,msg)
 t ：拖动层的标题
 msg ：拖动层的内容，可以为HTML
 w：    拖动层宽度
 h ：  拖动层高度
 x,y ：拖动层弹出时初始位置
</pre>

所属频道：层和布局特效/更新时间：2012-12-19

[收藏][报错][返回列表]

相关层和布局特效：

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些

相关链接：
复制本页链接| 搜索JavaScript层拖动函数，很实用
特效说明：
层和布局模板-JavaScript层拖动函数，很实用。