Javascript Jquery UI-可调整大小：alsoResize不准确？
好的，我没有使用'alsoResize'，但是我已经测试过了，它的行为是一样的 调整主元素的大小时，底部元素“marquee”的黑色边框通常与顶部元素的白色虚线边框不一致Javascript Jquery UI-可调整大小：alsoResize不准确？,javascript,jquery,css,jquery-ui,resizable,Javascript,Jquery,Css,Jquery Ui,Resizable,好的，我没有使用'alsoResize'，但是我已经测试过了，它的行为是一样的 调整主元素的大小时，底部元素“marquee”的黑色边框通常与顶部元素的白色虚线边框不一致 $(".layer").resizable({ //alsoResize: '.marquee', resize: function(event, ui) { $('.marquee').css({ width : ui.size.width + "px",
$(".layer").resizable({
//alsoResize: '.marquee',
resize: function(event, ui) {
$('.marquee').css({
width : ui.size.width + "px",
height : ui.size.height + "px",
left : ui.position.left + "px",
top : ui.position.top + "px",
});
},
handles: 'all',
aspectRatio: true,
});
用户界面参数向调整大小事件报告的大小和位置与实际大小和位置似乎存在差异。这可能是由于生成的ui参数与触发的事件之间存在延迟 我使用事件运行时报告的实际位置和大小进行了实验：
$('.marquee').css({
'left' : $(this).position().left,
'top' : $(this).position().top,
'width' : $(this).width(),
'height' : $(this).height()
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".layer").resizable({
handles: 'all',
aspectRatio: true,
});
});
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<link type="text/css">
#canvas {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
background: #999}
.marquee {
border: 1px dashed #fff;
position: absolute;
left: -1px; top: -1px;
width: 100%; height: 100%;
display: block;
z-index: 2500;
}
.layer {
border: 1px solid black;
position: absolute;
left: 150px; top: 150px;
width: 250px; height: 226px;
display: block;
z-index: 2501;
}
</link>
<body>
<div id="canvas">
<a class="layer" href="#"><span class="marquee"></span></a>
</div>
</body>
$（文档）.ready（函数（）{
$（“.layer”）。可调整大小({
句柄：“全部”，
是的，
});
});
#画布{
宽度：500px；
高度：500px；
位置：相对位置；
溢出：隐藏；
背景：#999}
马奎尔先生{
边框：1px虚线#fff；
位置：绝对位置；
左侧：-1px；顶部：-1px；
宽度：100%；高度：100%；
显示：块；
z指数：2500；
}
.层{
边框：1px纯黑；
位置：绝对位置；
左：150px；顶：150px；
宽度：250px；高度：226px；
显示：块；
z指数：2501；
}