`

可拖动的层

 
阅读更多
样式和脚本:
<style type="text/css">
		#postit{
		position:absolute;
		width:250;
		padding:5px;
		background-color:#FFFFFF;
		border:1px solid red;
		z-index:100;
		cursor:hand;
		color: red;
		}
	</style>
	<script type="text/javascript">
		function closeit(){
   			document.getElementById("postit").style.display="none";
		}
		//可拖动的层
		var currentMoveObj = null;    //当前拖动对象
		var relLeft;    //鼠标按下位置相对对象位置
		var relTop;
		function f_mdown(obj)
		{
		    currentMoveObj = obj;        //当对象被按下时,记录该对象
		    currentMoveObj.style.position = "absolute";
		    relLeft = event.x - currentMoveObj.style.pixelLeft;
		    relTop = event.y - currentMoveObj.style.pixelTop;
		}
		window.document.onmouseup = function()
		{
		    currentMoveObj = null;    //当鼠标释放时同时释放拖动对象
		}
		function f_move(obj)
		{
		    if(currentMoveObj != null)
		    {
		        currentMoveObj.style.pixelLeft=event.x-relLeft;
		        currentMoveObj.style.pixelTop=event.y-relTop;
		    }
		}
	</script>

 jsp页面:

<div id="postit" style="left:45%;top:2%" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
      <div align="right"><b><a href="javascript:closeit()">[关闭]</a></b></div>
   			hello,welcome to china!
    </div>

 运行代码,就可以拖动层在页面上移动了!

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics