Я разработал это взаимодействие/скрипт, который масштабирует любой элемент, передаваемый ему, и если этот элемент зажимается, он масштабируется вниз/меньше.
Так инициализируется сценарий (передача двух аргументов контейнера и элемента, подлежащего масштабированию/преобразованию)
$(function(){
var zoom = new collapse('#zoom','#zoom :first');
var zoom2 = new collapse('#zoom2','#zoom2 :first');
var zoom3 = new collapse('#zoom3','#zoom3 :first');
});
Он работает отлично, как указано выше, на отдельных идентификаторах, но мне нужно, чтобы он работал над классом.
Я попробовал это:
$(function(){
var zoom = new collapse('#zoom','.polaroid');
});
Но это приводит к тому, что весь скрипт не работает, потому что все элементы в этом классе передаются вместо одного, как с идентификатором.
Это позволит выбрать только первый элемент в классе, чтобы он не работал:
$(function(){
var zoom = new collapse('#zoom','.polaroid :first');
});
Как я могу изменить свой сценарий так, чтобы он применялся ко всем членам класса.polaroid в контейнере #main?
Вот мой сценарий:
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();
});
}
}
}
Оберните его как плагин jquery:
$.fn.collapse = function(filter) {
return this.each(function(){
collapse(this,filter);
});
}
$("#zoom,#zoom1,#zoom2").collapse(".polaroid");
или если каждый из элементов масштабирования имел общий класс,
$(".zoomel").collapse(".polaroid");
Вы должны запускать крах для каждого элемента.
element = $(element);
element.each(function(){
//each element would be this here
var $this= $(this);
//do whatever you want with $this
})