Question

我试图用JQuery显示图像的一部分，例如，从0到200像素的宽度。

我已经解决了这个问题，所以......

我想知道是否有更简单的方法，而不是为每个图像创建一个div并且每次都使用该脚本。
一种动画方式，从右到左，而不是从左到右。

这是我的剧本，有什么建议吗？

$("button").click(function(){
    if($('#hello2').css("opacity") != "0"){
        $('#hello2').animate({
            "width" : "0px",
            "opacity" : "0"
        });
    }
    else{
        $('#hello2').animate({
            "opacity" : "1",
            "width" : "500px"
        });
    }
});

Fiddle

感谢您的建议

Answer 1

我将其更改为使用background:url()属性而不是单独的div，但效果看起来有点不同。

但至少现在你所要做的就是为div的宽度设置动画。

$(document).ready(function () {
    $("button").click(function () {
        if ($('#img').css("width") == "100px") {
            $('#img').animate({
                "width": "300px"
            }, 'slow');
        } else {
            $('#img').animate({
                    "width": "100px"
            }, 'slow');
        }
    });
});

updated fiddle

我没有找到左边的权利。动画:(

Answer 2

你让它变得太复杂了。只需控制容器的大小即可完成！

function crop(ele, x1, y1, x2, y2){
   ele.animate({
        width: x2 - x1, height: y2 - y1
   }).find(">img").animate({
        top: -x1, left: -y1
   });
}

http://jsfiddle.net/DerekL/CLFTe/

JQuery剪切了没有裁剪插件的图像

2 个答案: