如何使用jQuery在圖像上拖放和調整大小？

如何使用jQuery調整圖片大小並保持其縱橫比相同？如何使用jQuery在圖像上拖放和調整大小？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>CrossSlide - A jQuery plugin to create pan and cross-fade animations</title> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

</head> 
<body> 

<style type="text/css"> 
#resizebleImage { background: silver; } 

</style> 

<script type="text/javascript"> 

$(document).ready(function(){ 
$("#resizebleImage").resizable().parent().draggable(); 
    }); 
</script> 

<img id="resizebleImage" src="http://images.askmen.com/galleries/singer/gloria-estefan/pictures/gloria-estefan-picture-4.jpg"> 
</body> 
</html>

來源

2010-04-23 Scott Yu - Front-End UX

好吧，我想出瞭如何做拖放和調整大小。現在我如何限制它以保持寬高比？我使用它修復了它。。$（「＃resizebleImage」）可調整大小的（）父（）拖動（）; – 2010-04-23 21:16:40

OH ......嘿...的aspectRatio：真實，

來源

2010-04-23 21:41:19

您可以通過使用 'alsoResize' 屬性做到這一點。

draggable.resizable({alsoResize:'#image'}); 
draggable.draggable();

draggable是div元素，圖像嵌入在div中。

來源

2011-02-03 07:11:31

如何使用jQuery在圖像上拖放和調整大小？

回答

相關問題