Question

我将用户上传的图像显示为div。有四个按钮，用于方形，风景，肖像和div的全景形状。用户可以根据div形状图像自动更改div的形状。但我没有发现任何jquery或任何与形状有关的东西。我希望当用户点击方形按钮div形状根据此变化和相同的景观，肖像，全景。我不知道如何开始这个。请帮忙。这是代码，我附上了截图。在这个我的图像不是根据高度和宽度切割，当我点击正方形时它左对齐在中心位置。请看截图。 $（“＃square”）。click（function（）{

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


});

Answer 1

根据您的要求设置height width

$(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);
    }); 
});

Answer 2

您需要使用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/

Answer 3

onclick使用Jquery CSS

并更改图像Div的CSS属性。并使它成为正方形或任何你想做的

jquery点击按钮改变div形状

3 个答案: