2013-04-08 110 views
-2

我正在將用戶上傳的圖像顯示到div中。有四個方形,風景,肖像和全景形狀的按鈕。用戶可以改變div的形狀,並根據自動設置的div形狀圖像。但我沒有找到任何jQuery或與形狀相關的任何東西。我想當用戶點擊方形按鈕div形狀變化根據此和風景,肖像,全景相同。我不知道如何開始這個。請幫忙。這是代碼,我附上了截圖。在這個我的圖像不是根據高度和寬度切割,並且當我點擊square時,它左對齊中心位置。請參閱截圖。 $( 「#方」)。點擊(函數(){jquery單擊按鈕更改div形狀

$(".resize-div").animate({width: 341,height: 341}); 


}); 
+0

您需要設置高度和按鈕DIV的寬度單擊 – 2013-04-08 05:30:10

+0

可以請你告訴我在jQuery的任何例子嗎? – user1523311 2013-04-08 05:33:38

+0

以及你問這樣的問題之前應該搜索,許多已經給你的問題的答案已經 – 2013-04-08 05:35:26

回答

4

根據您的要求

$(document).ready(function() { 

    $("#btnSquare").click(function(){ 
     $("#div").width(100).height(100); 
    }); 

$("#btnlandscape").click(function(){ 
     $("#div").width(300).height(400); 
    }); 

$("#btnportrait").click(function(){ 
     $("#div").width(400).height(300); 
    }); 

$("#btnpanoramic").click(function(){ 
     $("#div").width(100).height(100); 
    }); 
}); 
0

設置height width使用onclick Jquery CSS

,改變圖像Div的CSS屬性。並使其成爲方形或任何你想製作

1

你需要使用css方法來改變尺寸div。例如:

var dim; 

switch ($(this).data('type')) { 
    case 'square': 
     dim = {height: 400, width: 400}; 
     break; 

    case 'landscape': 
     dim = {height: 300, width: 400}; 
     break; 

    case 'portrait': 
     dim = {height: 400, width: 300}; 
     break; 
} 

http://jsfiddle.net/z46Tt/2/