JS特效(可拖动的div框)和用AJAX实现的可拖动的div框

1. 页面中的部分:
<div id="div1" οnmοusedοwn="m(this.id)" style="display:none;left: 0px;top: 0px; position: absolute; left: 150px; top: 2500px;">
	<table width="50%" border="0" cellpadding="3" cellspacing="1" 
	style="background: #ff7300; 
	position:static;filter:progid:DXImageTransform.Microsoft.DropShadow
	(color=#666666,offX=4,offY=4,positives=true)" align="center">
	<tr style="cursor: move;">
		<td><font color="#FFFFFF">往尚空间提示:</font></td>
		<td align="right"><input type="button" value="x" 
	onClick="javascript:closeMsgDiag();" style="cursor:pointer;"></td>
	</tr>
	<tr>
		<td colspan="2" width="100%" bgcolor="#FFFFFF" height="150" 
	align="middle">中国asp之家<br /><br />网址:<a href="http://www.aspxhome.com">http://www.aspxhome.com</a></td>
	</tr>
	</table>
</div>
2. CSS样式的部分:
#div1 {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    padding-top: 10%;
    z-index: 1001;
}

 

3. JS部分:
function openMsgDiag(){
		document.getElementById('div1').style.display = "inline";
	}
function closeMsgDiag(){
		document.getElementById('div1').style.display = "none";
	}	
	
//定义移动对象和移动坐标
var Mouse_Obj="none",_x,_y;
//拖动对象函数(自动)
document.οnmοusemοve=function()
{
    if(Mouse_Obj!=="none")
    {
    document.getElementById(Mouse_Obj).style.left=_x+event.x;
    document.getElementById(Mouse_Obj).style.top=_y+event.y;
    event.returnValue=false;
    }
}
//停止拖动函数(自动)
document.οnmοuseup=function()
{
    Mouse_Obj="none";
}
//确定被拖动对象函数 o为被拖动对象
function m(o)
{
    Mouse_Obj=o;
    _x=parseInt(document.getElementById(Mouse_Obj).style.left)-event.x;
    _y=parseInt(document.getElementById(Mouse_Obj).style.top)-event.y;
}

 

 

二、用AJAX实现的可拖动的div框(下面有个AJAX弹出提示信息效果.rar)

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值