<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
<!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" />
<title>无标题文档</title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//
bigarea($(".butt"),$(".alldiv"))
//
drop($(".one"),$(".alldiv"))
//
})
function bigarea(button,area){
//放大函数
button.mousedown(function(ev){
//
ev = ev || window.event;
var o_width = ev.pageX - button.offset().left
var o_right = parseInt(area.css("right"))
var o_top = ev.pageY
var o_height = area.height()
console.log(o_top)
$(document).mousemove(function(e){
var o_left = e.pageX - o_width
var all_w = document.documentElement.clientWidth;
area.width(all_w - o_left - o_right);
area.height(o_height + e.pageY - o_top);
})
//
})
button.mouseup(function(){
$(document).unbind("mousemove");
})
//
}
//拖动函数
function drop(floatobj,obj){
//////
floatobj.mousedown(function(ev){
ev = ev || window.event;
var obj_l = ev.pageX - obj.offset().left;
var obj_t = ev.pageY - parseInt(obj.css("top"))
$(document).mousemove(function(e){
var auto_l = document.documentElement.clientWidth - (e.pageX-obj_l) - obj.width()
var auto_t = e.pageY - obj_t
e = e || window.event;
obj.css("right",auto_l).css("top",auto_t)
})
})
//////
floatobj.mouseup(function(){
$(document).unbind("mousemove");
})
//////
}
//
</script>
<style type="text/css">
body{margin:0;padding:0;}
ul,li{margin:0;padding:0;list-style-type:none;}
.alldiv{width:300px;height:300px;position:absolute;right:10px;top:10px;background:red;}
.one{width:100%;height:100%;background:yellow;}
.butt{width:30px;height:30px;position:absolute;left:0;bottom:0;background:green;}
</style>
</head>
<body>
<div class="alldiv">
<div class="one"></div>
<div class="butt"></div>
</div>
</body>
</html>
