jQuery之浮动窗口实现代码(两种方法)
2010-09-08 00:00
981 查看
第一种方法:
预览:
Html代码
Js代码
css代码
第二种方法:
消息框遮罩层:<iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:none; position:absolute;"></iframe><div id="show_upload">nothing...</div>'
页面加载loading中:<div id="body_loading" onClick="loaded();"><img src="__PUBLIC__/images/body_load.gif"></div>
关闭浮动窗口:<a href="javascript:hideupload()">关闭窗口建议用小图片</a>
打开浮动窗口:<a href="javascript:showupload('admin.php')">打开浮动</a>
预览:
Html代码
<html> <head> <title>浮动窗口</title> <link type="text/css" rel="stylesheet" href="css/overflow.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/overflow.js"></script> <script type="text/javascript"> $(document).ready(function(){ var b = $("#b"); var overFlow = $("#over"); b.click(function(){ overFlow.fadeIn(); $("#mask").css("background","#111"); $("#mask").css("opacity","0.8"); }) $("#close").click(function(){ overFlow.fadeOut(); $("#mask").css("background","#fff"); $("#mask").css("opacity","1"); }); drag($("#over"),$("#title")); }) ; </script> </head> <body> <div id="over"> <div id="title"><span id="t">这只是一个演示标题</span><span id="close">[ x ]</span></div> <div id="content"> When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/> ---This is edited by Alp. </div> </div> <div id="mask"> <a id="b" href="#">click</a></div> </body> </html>
Js代码
function drag(overFlow,title){ title.onmousedown = function(evt){ var doc = document; var evt = evt || window.event; var x = evt.offsetX?evt.offsetX:evt.layerX; var y = evt.offsetY?evt.offsetY:evt.layerY; if(overFlow.setCapture){ overFlow.setCapture(); }else if(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } doc.onmousemove = function(evt){ evt = evt || window.event; var xPosition = evt.pageX || evt.clientX; var yPosition = evt.pageY || evt.clientY; var newX = xPosition - x; var newY = yPosition - y; overFlow.style.left = newX; overFlow.style.top = newY; }; doc.onmouseup = function(){ if(overFlow.releaseCapture){ overFlow.releaseCapture(); }else if(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } doc.onmousemove=null; doc.onmouseup=null; }; }; }
css代码
#over{ position: absolute; left: 300px; top: 200px; border: 1px solid black; display: none; background: #cccccc; cursor: default; width: 300px; z-index: 10; opacity: 1; } #title{ border: 1px solid #1840C4; background: #95B4DC; padding: 2px; font-size:12px; cursor: default; } #close{ cursor: pointer; margin-right: 1px; overflow: hidden; } #content{ border: 1px solid #C2D560; background: #EFF4D7; } #t{ margin-right:145px; } #mask{ z-index: 1; background: #fff; width: 1024px; height: 800px; } #b{ position: absolute; left: 200px; top: 100px; } body{ padding: 0px; margin: 0px; } #over{ background: transparent; }
第二种方法:
消息框遮罩层:<iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:none; position:absolute;"></iframe><div id="show_upload">nothing...</div>'
页面加载loading中:<div id="body_loading" onClick="loaded();"><img src="__PUBLIC__/images/body_load.gif"></div>
关闭浮动窗口:<a href="javascript:hideupload()">关闭窗口建议用小图片</a>
打开浮动窗口:<a href="javascript:showupload('admin.php')">打开浮动</a>
// 消息框loading function loading(){ var o = $('#body_loading'); o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px"); o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px"); o.fadeIn("fast"); } // 消息框消失 function loaded(){ var o = $('#body_loading'); o.fadeOut("fast"); } // 隐藏浮动窗口 function hideupload(){ $('#show_upload').hide(); $('#show_upload_iframe').hide(); } // 弹出浮动窗口 function showupload(ajaxurl){ loading(); var o=$('#show_upload'); var f=$('#show_upload_iframe'); var top = 200; $.ajax({ url: ajaxurl, //cache: false, success: function(res){ loaded(); o.html(res); o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px"); if($(document).scrollTop()>200){ top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2); } o.css("top",top+"px"); f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')}); f.show(); o.show(); } }); }
相关文章推荐
- jQuery之浮动窗口实现代码(两种方法)
- jquery和javascript两种实现浮动窗口的拖拽效果(参照网上资料以及韩顺平老师讲解)
- Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
- jquery实现浮动在网页右下角的彩票开奖公告窗口代码
- jquery实现浮动在网页右下角的彩票开奖公告窗口代码
- Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
- jQuery弹出窗口打开链接的实现代码
- JQuery实现的在新窗口打开链接的方法小结
- 两种方法基于jQuery实现IE浏览器兼容placeholder效果
- jQuery+jqmodal弹出窗口实现代码分明
- 3kb jQuery代码搞定各种树形选择的实现方法
- javaScript和jQuery自动加载简单代码实现方法
- jquery实现弹出窗口效果的实例代码
- jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
- jQuery实现table隔行换色和鼠标经过变色的两种方法
- jQuery实现图片信息的浮动显示实例代码
- jQuery实现浮动层随浏览器滚动条滚动的方法
- [置顶] java面试题:java中的单例设计模式及两种实现方法的代码举例
- jquery如何改变html标签的样式(两种实现方法)
- 两种方法使用jquery实现左右移动效果(包含each遍历方式)