jquery 浮动窗口详细实现方法
文章来讲一款jquery 浮动窗口详细实现方法与实例应用，我们很清楚的利用了jquery浮动插件来实例下面的效果。当一个容器对象，例如一个div，已捕获鼠标，活动的对象是原产于该容器内发射的分区，除非setcapture方法bcontainercapture参数设置为false。通过虚假的价值导致容器不再捕获所有文档事件。相反，该容器内的对象仍然火灾事件，这些事件也和泡沫预期。<br/>
---这是高山编辑。
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;
};
};
}
html代码
<html>
<head>
<title>浮动窗口</title>
<style>
#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;
}
</style>
<link type="text/css教程" rel="stylesheet" href="css/overflow.css" />
<script type="text/网页特效" 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">
当一个容器对象，例如一个div，已捕获鼠标，活动的对象是原产于该容器内发射的分区，除非setcapture方法bcontainercapture参数设置为false。通过虚假的价值导致容器不再捕获所有文档事件。相反，该容器内的对象仍然火灾事件，这些事件也和泡沫预期。<br/>
---这是高山编辑。</div>
</div>
<div id="mask"> <a id="b" href="#">click</a></div>
</body>
</html>
