Jquery UI - Resizable:也不准确
Jquery UI - Resizable: alsoResize not accurate?
好的,我没有使用'alsoResize',但我已经测试过了,它的行为是一样的。
当你调整主元素的大小时,底部元素"marquee"的黑色边框经常会与顶部元素的虚线白色边框偏离直线。
$(".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,
});
http://jsfiddle.net/digitaloutback/uGr3w/3/在本地演示中使用firebug,在它们出线的阶段,你可以看到left, top和width, height的inline元素样式是不同的。
我想知道是否可以将位置和大小统计发送到输出精确测量到两个元素的函数?有更简单的选择吗?由于
更新:
我有一个解决方案,工作干净…它将可调整的计算尺寸传递给一个函数,该函数也将顶层设置为这些尺寸。
我相信有更有效的方法来做到这一点,请随意提供优化版本…
http://jsfiddle.net/digitaloutback/VDfpY/5/ui参数向resize事件报告的大小和位置与实际大小和位置似乎存在差异。这可能是由于在构建ui参数和触发事件之间存在延迟。
我尝试使用事件运行时报告的实际位置和大小:
$('.marquee').css({
'left' : $(this).position().left,
'top' : $(this).position().top,
'width' : $(this).width(),
'height' : $(this).height()
});
这似乎更精确地匹配实际尺寸。http://jsfiddle.net/VDfpY/1/
这个怎么样?让CSS处理大小,而不是JShttp://jsfiddle.net/HerrSerker/uGr3w/5/
——编辑添加的代码
<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>
相关文章:
- 在 JavaScript 中对音频文件进行计时不准确
- 谷歌地图API-缩小时默认标记不准确
- Socket.io 设置间隔不准确
- CreateJS的PreloadJS进度事件不准确
- kineticjs - 鼠标悬停不准确
- 使用 javascript 库 draw2d 选择连接链接不准确
- 为什么在枚举属性/函数时键长度不准确
- JSON 字符串有效,但 JSON 数据不准确
- 计算何时多次写入文件会导致不准确
- 纹理帧缓冲区数据不准确
- Javascript减去数字是不准确的 - 为什么
- HTML5:矩形定位不准确
- 这 === 是否不适用于浮点舍入不准确的 b/c
- 碰撞检测在我的游戏中不准确
- setInterval上的计时;看起来不准确
- 与Async nodejs相关的问题-给出不准确的响应
- Promisejs不准确,$getJSON在循环中
- node.js下javascript中的日期函数不准确
- HTML5 audio - currentTime属性不准确
- Jquery UI - Resizable:也不准确