jQuery弹窗对话框拖动非插件资源-CSDN下载

共7个文件

png：4个

js：1个

html：1个

需积分: 10 106 浏览量 2010-11-01 10:56:58 上传评论收藏 67KB RAR 举报

jQuery 弹窗对话框拖动非插件 <!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" /> <meta name="keywords" content="VihChina资源网 www.vihchina.net"/> <meta name="description" content="VihChina资源网 www.vihchina.net"/> <title>VihChina资源网 www.vihchina.net</title> <style type="text/css"> *{ margin:0; padding:0; list-style:none;} img{ border:0; display:block} .box_main{ width:400px; height:142px; background:url(images/box_bg.png) no-repeat; padding:1px; z-index:1000; position:absolute; display:none} .box_head{ width:400px; height:24px} .box_head h1{ display:block; float:left; width:365px; height:24px; padding:0 0 0 10px; font-size:12px; line-height:24px; overflow:hidden; color:#FFFFFF} .box_head span{ display:block; float:left; cursor:pointer; width:24px; height:24px;} .box_con{ width:280px; height:118px;padding:0 0 0 120px;} .box_tips{ width:280px; height:74px; font-size:12px; padding:10px 0 0 0} .box_btn{ width:270px; height:34px;padding:0 10px 0 0; overflow:hidden} .box_btn a{ float:right; padding:0 2px} </style> <script language="javascript" src="js/jquery-1.4.min.js"></script> </head> <body> <div class="box_main" id="boxhandler"> <div class="box_head"> <h1>网站管理员请求和您通话-<a href="http://www.vihchina.net" target="_blank">VIHCHINA.NET</a></h1><span id="doclose"></span> </div> <div class="box_con"> <div class="box_tips">亲爱的客户：您好！我是<a href="http://www.vihchina.net" target="_blank">VIHCHINA.NET</a>的管理员，能为您做些什么吗？</div> <div class="box_btn"> <a href="javascript:void(0);" id="do_close"><img src="images/icon1.png" /></a><a href="javascript:void(0);"><img src="images/icon2.png" /></a><a href="javascript:void(0);"><img src="images/icon3.png" /></a></div> </div> </div> </body> </html> <script language="javascript"> $(function(){ //定义变量 //isdown 判断鼠标是否按下 var isdown = false; //记录鼠标位置 var gapx=gapy=0; //获取可视区域的大小 var b_width=b_height = 0; b_width = $(window).width(); //浏览器当前窗口可视区域高度 b_height = $(window).height(); //浏览器当前窗口可视区域宽 //初始化 box_main $("#boxhandler").css({display:'block'}); //拖动对象的宽度和高度 var box_width=box_height = 0; box_width = $(".box_main").width(); box_height = $(".box_main").height(); left_point = (b_width-box_width)/2; top_point = (b_height/2)-box_height; $("#boxhandler").css({display:'block',top:top_point,left:left_point}); //绑定鼠标上移事件 $("#boxhandler .box_head h1").bind('mouseover',function(){ $("#boxhandler .box_head").css({cursor:'move'}); }); //绑定鼠标按下事件 $("#boxhandler .box_head h1").bind('mousedown',function(e){ isdown = true; //计算鼠标和对象边界的差值 //获取对象的当前位置 var offset = $("#boxhandler").offset(); //$("#mtip").html("left:"+offset.left+",top:"+offset.top); //获取鼠标的当前位置 if(!e){ var e = window.event; posx = e.pageX; posy = e.pageY; }else if(e.clientX || e.clientY){ posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } gapx = (posx-offset.left); gapy = (posy-offset.top); }); //绑定鼠标释放事件 $("#boxhandler .box_head h1").bind('mouseup',function(){ isdown = false; }); //关闭对话框 $("#doclose").click(function(){ $("#boxhandler").css({display:'none'}); }); $("#do_close").click(function(){ $("#boxhandler").css({display:'none'}); }); //鼠标移动 $(document).mousemove(function(e){ if (isdown){ //获取对象的当前位置 var offset = $("#boxhandler").offset(); //$("#mtip").html("left:"+offset.left+",top:"+offset.top); //获取鼠标的当前位置 if(!e){ var e = window.event; posx = e.pageX; posy = e.pageY; }else if(e.clientX || e.clientY){ posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } //鼠标位置 var cmpointx = posx; var cmpointy = posy; //设置对象位置 left_point = posx-gapx; top_point = posy-gapy; if(posx>0&&(posx+(box_width-gapx)<b_width-10)){ $("#boxhandler").css({left:left_point}); } if(posy>0){ $("#boxhandler").css({top:top_point}); } } }); //停止移动 $(document).mouseup(function(){ isdown=false; }); }); </script>

资源推荐

资源详情

资源评论

收起资源包目录

box.rar （7个子文件）

images

box_bg.png 25KB

icon1.png 3KB

Thumbs.db 21KB

icon2.png 2KB

icon3.png 3KB

jquery-1.4.min.js 68KB

box.html 5KB

<!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" /> <meta name="keywords" content="VihChina资源网 www.vihchina.net"/> <meta name="description" content="VihChina资源网 www.vihchina.net"/> <title>VihChina资源网 www.vihchina.net</title> <style type="text/css"> *{ margin:0; padding:0; list-style:none;} img{ border:0; display:block} .box_main{ width:400px; height:142px; background:url(images/box_bg.png) no-repeat; padding:1px; z-index:1000; position:absolute; display:none} .box_head{ width:400px; height:24px} .box_head h1{ display:block; float:left; width:365px; height:24px; padding:0 0 0 10px; font-size:12px; line-height:24px; overflow:hidden; color:#FFFFFF} .box_head span{ display:block; float:left; cursor:pointer; width:24px; height:24px;} .box_con{ width:280px; height:118px;padding:0 0 0 120px;} .box_tips{ width:280px; height:74px; font-size:12px; padding:10px 0 0 0} .box_btn{ width:270px; height:34px;padding:0 10px 0 0; overflow:hidden} .box_btn a{ float:right; padding:0 2px} </style> <script language="javascript" src="js/jquery-1.4.min.js"></script> </head> <body> <div class="box_main" id="boxhandler"> <div class="box_head"> <h1>网站管理员请求和您通话-<a href="http://www.vihchina.net" target="_blank">VIHCHINA.NET</a></h1><span id="doclose"></span> </div> <div class="box_con"> <div class="box_tips">亲爱的客户：您好！我是<a href="http://www.vihchina.net" target="_blank">VIHCHINA.NET</a>的管理员，能为您做些什么吗？</div> <div class="box_btn"> <a href="javascript:void(0);" id="do_close"><img src="images/icon1.png" /></a><a href="javascript:void(0);"><img src="images/icon2.png" /></a><a href="javascript:void(0);"><img src="images/icon3.png" /></a></div> </div> </div> </body> </html> <script language="javascript"> $(function(){ //定义变量 //isdown 判断鼠标是否按下 var isdown = false; //记录鼠标位置 var gapx=gapy=0; //获取可视区域的大小 var b_width=b_height = 0; b_width = $(window).width(); //浏览器当前窗口可视区域高度 b_height = $(window).height(); //浏览器当前窗口可视区域宽 //初始化 box_main $("#boxhandler").css({display:'block'}); //拖动对象的宽度和高度 var box_width=box_height = 0; box_width = $(".box_main").width(); box_height = $(".box_main").height(); left_point = (b_width-box_width)/2; top_point = (b_height/2)-box_height; $("#boxhandler").css({display:'block',top:top_point,left:left_point}); //绑定鼠标上移事件 $("#boxhandler .box_head h1").bind('mouseover',function(){ $("#boxhandler .box_head").css({cursor:'move'}); }); //绑定鼠标按下事件 $("#boxhandler .box_head h1").bind('mousedown',function(e){ isdown = true; //计算鼠标和对象边界的差值 //获取对象的当前位置 var offset = $("#boxhandler").offset(); //$("#mtip").html("left:"+offset.left+",top:"+offset.top); //获取鼠标的当前位置 if(!e){ var e = window.event; posx = e.pageX; posy = e.pageY; }else if(e.clientX || e.clientY){ posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } gapx = (posx-offset.left); gapy = (posy-offset.top); }); //绑定鼠标释放事件 $("#boxhandler .box_head h1").bind('mouseup',function(){ isdown = false; }); //关闭对话框 $("#doclose").click(function(){ $("#boxhandler").css({display:'none'}); }); $("#do_close").click(function(){ $("#boxhandler").css({display:'none'}); }); //鼠标移动 $(document).mousemove(function(e){ if (isdown){ //获取对象的当前位置 var offset = $("#boxhandler").offset(); //$("#mtip").html("left:"+offset.left+",top:"+offset.top); //获取鼠标的当前位置 if(!e){ var e = window.event; posx = e.pageX; posy = e.pageY; }else if(e.clientX || e.clientY){ posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } //鼠标位置 var cmpointx = posx; var cmpointy = posy; //设置对象位置 left_point = posx-gapx; top_point = posy-gapy; if(posx>0&&(posx+(box_width-gapx)<b_width-10)){ $("#boxhandler").css({left:left_point}); } if(posy>0){ $("#boxhandler").css({top:top_point}); } } }); //停止移动 $(document).mouseup(function(){ isdown=false; }); }); </script>

评论收藏

内容反馈