jQuery动态图片大小变化 [英] Jquery dynamic image size change
本文介绍了jQuery动态图片大小变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
查询是:-图片大小应根据循环增加四倍
谢谢
$(function(){var plus = 50;var max = 4;setTimeout(function(){for(var i = 0; i< max; i ++){var height = 50;var width = 50;var height = height + plus;var width = width + plus;加+ =加;$(#image").width(width).height(height);}}，2000年)；}); < script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>< body>< div>< img src ="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnk1kzJCdN3FFDcjMIBSNc2YuBdCuc6A5Cpzg4LIDkMB15-mek" id ="image"/></div></body> 解决方案
您将需要使用 setInterval()和 clearInterval().
请检查以下示例.
$(function(){var plus = 50;var max = 4;var timer = setInterval(function(){var height = 50;var width = 50;高度=高度+加号；宽度=宽度+加号;加+ =加;$(#image").width(width).height(height);如果(加> = 800)clearInterval(timer);}，2000年)；}); < script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>< body>< div>< img src ="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnk1kzJCdN3FFDcjMIBSNc2YuBdCuc6A5Cpzg4LIDkMB15-mek" id ="image"/></div></body> I have create a logic to auto increment image height and width by using for loop in jquery but my image zoomed suddenlly ,not according to loop .Please help me to resolve my query .
Query is :- image size should be increase in four times according to loop
Thanks all
$(function() {
var plus = 50 ;
var max = 4;
setTimeout(function(){
for(var i = 0; i < max; i++) {
var height = 50;
var width = 50;
var height = height + plus;
var width = width + plus;
plus += plus;
$("#image").width(width).height(height);
}
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnk1kzJCdN3FFDcjMIBSNc2YuBdCuc6A5Cpzg4LIDkMB15-mek" id="image"/>
</div>
</body>
解决方案
You would need to use setInterval() and clearInterval().
Check below example.
$(function() {
var plus = 50;
var max = 4;
var timer = setInterval(function() {
var height = 50;
var width = 50;
height = height + plus;
width = width + plus;
plus += plus;
$("#image").width(width).height(height);
if (plus >= 800)
clearInterval(timer);
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnk1kzJCdN3FFDcjMIBSNc2YuBdCuc6A5Cpzg4LIDkMB15-mek" id="image" />
</div>
</body>
这篇关于jQuery动态图片大小变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
