晚上好 - 动态访问图像高度和宽度的最佳方法是什么。
我想在图像宽度和高度上添加 20%,并在周围的 div 悬停时设置动画,我想我需要使用“this”,但不确定如何访问图像。
非常感谢您的帮助。
干杯保罗
最佳答案
您可以使用 .height()
执行类似的操作和 .width()
带函数参数:
$("img").hover(function() {
$(this).height(function(i, h) { return h * 1.2; })
.width(function(i, w) { return w * 1.2; });
}, function() {
$(this).height(function(i, h) { return h / 1.2; })
.width(function(i, w) { return w / 1.2; });
});
You can give it a try here ,如果您想要平滑的动画,您可以存储初始高度/宽度和 .animate()
,像这样:
$("img").each(function() {
$.data(this, 'size', { width: $(this).width(), height: $(this).height() });
}).hover(function() {
$(this).stop().animate({ height: $.data(this,'size').height*1.2,
width: $.data(this,'size').width*1.2 });
}, function() {
$(this).stop().animate({ height: $.data(this,'size').height,
width: $.data(this,'size').width });
});
You can give it a try here ,请务必在 $(window).load()
中运行这些选项之一,并且不 $(document).ready()
,因为尺寸可能尚未加载。
关于Jquery - 悬停时将图像高度和宽度扩展 20%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3630734/