<!--临时写了个!不过拉伸的没实现,还没试验过!-->
<!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>
<title>窗体最大化最小化拖动</title>
<style type="text/css">
#form{position:absolute;width:200px;top:0px;left:0px;display:none;z-index:2;}
#formtop{height:20px;background:lightblue;width:200px;text-align:right;cursor:all-scroll;z-index:3}
#formcontent{height:180px;background:yellow;}
span{font-size:12px;background:red;color:White;cursor:pointer;}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var mini = false;
$(document).ready(function(){
var $form = $("#form");
var $formtop = $("#formtop");
var $formcontent = $("#formcontent");
var $miniform = $("#miniform");
var clientw = $(window).width();
var clienth = $(window).height();
var formw = $form.width();
var formh = $form.height();
var minitop;
var move = false;
$("a").click(function(){
$form.css({"display":"block","top":(clienth-formh)/2,"left":(clientw-formw)/2})
})
$formtop.mousedown(function(e){
move=true;
e=e||window.event;
var x = e.pageX;
var y = e.pageY;
var l = parseInt($form.css("left"));
var t = parseInt($form.css("top"));
var mousex = x-l;
var mousey = y-t;
$(document).mousemove(function(e1){
if(move){
e1=e1||window.event;
var x1 = e1.pageX;
var y1 = e1.pageY;
var resultx = x1-mousex;
var resulty = y1-mousey;
$form.css({"top":resulty,"left":resultx});
}
})
$(document).mouseup(function(){
move=false;
})
})
$miniform.toggle(function(){
mini=true;
$form.animate({"top":clienth-$formtop.height(),"left":0-($form.width()-$miniform.width())},"fast",function(){
minitop = parseInt($form.css("top"));
$formcontent.css("display","none");
$miniform.html("最大化");
})
},function(){
mini=false;
$form.animate({"top":(clienth-formh)/2,"left":(clientw-formw)/2},"fast",function(){
$formcontent.css("display","block");
$miniform.html("最小化");
})
})
})
</script>
</head>
<body>
<a>弹出</a>
<div id="form">
<div id="formtop"><span id="miniform">最小化</span></div>
<div id="formcontent"></div>
</div>
</body>
</html>
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。