JS中让DIV层向四周扩大
让层变大可以改变他的widthheight属性（这样只能让层向一个方向变），但让其向四周扩大该怎么做，最好写点源码...
让层变大可以改变他的 width height 属性（这样只能让层向一个方向变），但让其向四周扩大该怎么做，最好写点源码
展开
4个回答
展开全部
决定div的位置的属性是left,top然后大小是height，width你觉得你该怎么改变这四个属性的值才能让他们看起来在扩张呢？？这就是你想的问题了，俺只是给个思考的方向，毕竟这个东西是你要弄的东西
已赞过
已踩过<
你对这个回答的评价是？
展开全部
你这个例子很简单啊！我给你发个jquery的库你看看！你给我邮箱吧！下面就代码但是外部文件这里写不下了！jquery-ui-1.7.2.custom/development-bundle/demos/resizable/default.html
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Default functionality</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable();
});
</script>
</head>
<body>
<div class="demo">
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.</p>
</div><!-- End demo-description -->
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Resizable - Default functionality</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable();
});
</script>
</head>
<body>
<div class="demo">
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.</p>
</div><!-- End demo-description -->
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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=gb2312" />
<title>无标题文档</title>
</head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#aaa").click(function(){
$(".demo-description").animate({width:'1003',height:'500'},1000);
})
})
</script>
<style type="text/css">
#aaa { background-color:#fff;}
.demo-description {width:100px;border:1px solid #999999; background-color:#CCCCCC;padding:5px; text-align:center; color:#f00;}
</style>
<body>
<div id="aaa">Click me</div>
<div class="demo-description">1111111</div>
</body>
</html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#aaa").click(function(){
$(".demo-description").animate({width:'1003',height:'500'},1000);
})
})
</script>
<style type="text/css">
#aaa { background-color:#fff;}
.demo-description {width:100px;border:1px solid #999999; background-color:#CCCCCC;padding:5px; text-align:center; color:#f00;}
</style>
<body>
<div id="aaa">Click me</div>
<div class="demo-description">1111111</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
定位跟width与height同时变化，比如你的宽和高都增加了2px，那么你的位置就要把左边距和上边距都要减1px
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
