17 html javascript css jquery
我正在使用jQuery插件来调整元素大小.元素高度和宽度以百分比(%)设置,而不是以像素为单位.每当我重新调整任何元素的大小时,它的高度和宽度都会更改为固定的像素,但我想要这个百分比的变化.
我确信必须有一些技术问题,但也会有解决方案.
#parentDiv { height:100%; width:100%;}
.image { height: 25%; width: 25%; }
<body>
<div id = "parentDiv">
<div class="image" id="image1" onmouseover="resizeMe(this);"> </div>
<div class="image" id="image2" onmouseover="resizeMe(this);"> </div>
</div>
<script>
function resizeMe(obj) {
$(#obj.id).resizable(); }
</body>
但是一旦我重新调整id = image1的大小,下面就是HTML代码.它包含高度和宽度大小(以像素为单位).有没有人点亮它,我怎么能设法只按百分比重新调整大小.
<div class="image" style="width: 345px; height: 52px;">
mek*_*all 25
jQuery从浏览器DOM引擎获取其值,无论它们是如何初始设置的,它总是以像素为单位返回标准化值.
因此,只有在调整大小停止后,才能通过重新计算基于元素宽度/高度和父级宽度/高度的百分比来实现此目的.
$(".image").resizable({
autoHide: true,
stop: function(e, ui) {
var parent = ui.element.parent();
ui.element.css({
width: ui.element.width()/parent.width()*100+"%",
height: ui.element.height()/parent.height()*100+"%"
});
}
});
请参阅上面有关jsFiddle的操作
注意我是如何设置宽度/高度.css而不是使用.width和.height.这是因为后者将由DOM引擎规范化并变为像素.
现在对您的代码提供一些反馈.说实话,这真是一团糟.使用内联样式和脚本是一种非常糟糕的做法.#parentDiv像使用css一样设置宽度/高度.image.并且不要使用onmouseover属性.而是使用jQuery绑定事件.bind.
此外,您不应该在鼠标悬停时使元素可调整大小.文档准备好后,应该完成一次.autoHide当鼠标悬停在元素上时,使用该选项隐藏处理程序.另一种方法是绑定enable和disable鼠标悬停的方法,但不会有相同的结果.