0

私はこの相互作用/スクリプトを開発しました。これは、渡された要素をスケーリングし、その要素がピンチされている場合は、縮小/縮小します。

これは、スクリプトがどのように初期化されるかです (2 つの引数をコンテナとスケーリング/変換するアイテムに渡します:

$(function(){
var zoom = new collapse('#zoom','#zoom :first');
var zoom2 = new collapse('#zoom2','#zoom2 :first');
var zoom3 = new collapse('#zoom3','#zoom3 :first');
});

単一の ID では上記のように問題なく動作しますが、クラスで動作する必要があります。

私はこれを試しました：

$(function(){
var zoom = new collapse('#zoom','.polaroid');
});

しかし、id のように 1 つではなく、そのクラスのすべての要素が渡されるため、スクリプト全体が機能しなくなります。

これはクラスの最初のアイテムのみを選択するため、機能しません。

$(function(){
var zoom = new collapse('#zoom','.polaroid :first');
});

#main コンテナー内の .polaroid クラスのすべてのメンバーに適用されるようにスクリプトを変更するにはどうすればよいですか?

これが私のスクリプトです：

function collapse(container, element){
container = $(container).hammer({
    prevent_default: true,
    scale_threshold: 0
});
element = $(element);
var displayWidth = container.width();
var displayHeight = container.height();
var MIN_ZOOM = 0;
var MAX_ZOOM = 1;
var scaleFactor = 1;
var previousScaleFactor = 1;
var startX = 0;
var startY = 0;
var translateX = 0;
var translateY = 0;
var previousTranslateX = 0;
var previousTranslateY = 0;
var time = 1;
var tch1 = 0,
    tch2 = 0,
    tcX = 0,
    tcY = 0,
    toX = 0,
    toY = 0,
    cssOrigin = "";
container.bind("transformstart", function(event){
    e = event;
    tch1 = [e.touches[0].x, e.touches[0].y],
        tch2 = [e.touches[1].x, e.touches[1].y];
    tcX = (tch1[0]+tch2[0])/2,
        tcY = (tch1[1]+tch2[1])/2;
    toX = tcX;
    toY = tcY;
    var left = $(element).offset().left;
    var top = $(element).offset().top;
    cssOrigin = (-(left) + toX)/scaleFactor +"px "+ (-(top) + toY)/scaleFactor +"px";
});
container.bind("transform", function(event){
    scaleFactor = previousScaleFactor * event.scale;
    scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));
    transform(event);
});
container.bind("transformend", function(event){
    previousScaleFactor = scaleFactor;
    if(scaleFactor > 0.42){
        $(element).css('-webkit-transform', 'scaleY(1.0)').css('transform', 'scaleY(1.0)');
    }
});
function transform(e){
    var cssScale = "scaleY("+ scaleFactor +")";
    element.css({
        webkitTransform: cssScale,
        webkitTransformOrigin: cssOrigin,
        transform: cssScale,
        transformOrigin: cssOrigin,
    });
    if(scaleFactor <= 0.42){
        $(element).animate({height:0}, function(){
            $(this).remove();
        });
    }
}

}

4

2 に答える 2

1

jquery プラグインとしてラップします。

$.fn.collapse = function(filter) {
    return this.each(function(){
        collapse(this,filter);
    });
}

$("#zoom,#zoom1,#zoom2").collapse(".polaroid");

または、各ズーム要素に共通のクラスがある場合、

$(".zoomel").collapse(".polaroid");
于 2013-10-24T18:43:08.187 に答える
0

要素ごとに折りたたみを実行する必要があります。

element = $(element);
element.each(function(){
   //each element would be this here
   var $this=  $(this);
   //do whatever you want with $this
})
于 2013-10-24T18:34:25.770 に答える