Difference between revisions of "Template:Tongji-Software/js/pic switch/jflex.js"

(Created page with "!function(t){function i(i,e){function l(i,e){var l="number"==typeof i?i:t(this).index(),s=l?"transform: translate3d(-"+l*h.slideWidth+"px, 0, 0); ":"",n="width: "+h.slideCount...")
 
 
Line 1: Line 1:
−
!function(t){function i(i,e){function l(i,e){var l="number"==typeof i?i:t(this).index(),s=l?"transform: translate3d(-"+l*h.slideWidth+"px, 0, 0); ":"",n="width: "+h.slideCount*h.slideWidth+"px";h.index=l,h.$slider.attr("style",s+n),"number"!=typeof i&&h.autoMode&&clearInterval(h.autoMode),h.$slideTitles.find("li").attr("class",""),e?0===l?(h.$slideTitles.find("li:eq("+(h.slideCount-1)+")").attr("class","title--auto title--right"),h.$slideTitles.find("li:eq("+l+")").attr("class","title--active title--auto")):(h.$slideTitles.find("li:eq("+(l-1)+")").attr("class",e?"title--right title--auto":"title--right"),h.$slideTitles.find("li:eq("+l+")").attr("class",e?"title--active title--auto":"title--active")):h.$slideTitles.find("li:eq("+l+")").attr("class","title--active"),h.$el.offset().height}function s(){var t=0;h.autoMode=setInterval(function(){t=t===h.slideCount-1?0:t+1,l(t,!0)},h.options.timing),h.$slideTitles.children().first().attr("class","title--active title--auto")}function n(){h.$slideTitles.children().first().attr("class","title--active")}function d(){h.$slideTitles.children().bind("click",l),h.$slides.find("img").bind("dragstart",function(t){t.preventDefault()}),t(window).bind("resize orientationchange",u)}function a(){function t(t){h.autoMode&&clearInterval(h.autoMode);var l="mousedown"===t.type?t.originalEvent:t.originalEvent.touches[0];n=l.pageX,h.$slider.bind("touchmove",i).bind("mousemove",i).bind("mouseleave",e).bind("mouseup",e).bind("touchend",e).bind("touchcancel",e).removeClass("slides--anim"),h.$slideTitles.children().removeClass("title--auto")}function i(t){var i="touchmove"===t.type?t.originalEvent.touches[0]:t.originalEvent,e=i.pageX;d=Math.round(e-n),s=0>d?"<":">";var l=h.index*-h.slideWidth+d;">"===s&&0===h.index||"<"===s&&h.index===h.slideCount-1||h.$slider.attr("style","width: "+h.slideWidth*h.slideCount+"px; transform: translate3d("+l+"px, 0, 0)")}function e(t){var a="<"===s?h.index+1:h.index-1,o="touchend"===t.type||"touchcancel"===t.type?t.originalEvent.changedTouches[0]:t.originalEvent,r=o.pageX,u=h.index*h.slideWidth;return d=Math.round(r-n),h.$slider.unbind("touchmove",i).unbind("mousemove",i).unbind("mouseleave",e).unbind("mouseup",e).unbind("touchend",e).unbind("touchcancel",e).addClass("slides--anim"),">"===s&&0===h.index||"<"===s&&h.index===h.slideCount-1?void 0:d>140||-140>d?void l(a):void h.$slider.attr("style","width: "+h.slideWidth*h.slideCount+"px; transform: translate3d(-"+u+"px, 0, 0)")}var s,n,d=0;h.$slider.bind("touchstart",t),h.$slider.bind("mousedown",t)}function o(){h.$el.addClass("jFlex"),h.$slider=h.$el.children(),h.$slides=h.$slider.children(),h.slideCount=h.$slides.length,h.slideWidth=h.$el.width(),h.$slides.width(h.slideWidth+"px"),h.$el.children().width(h.slideCount*h.slideWidth+"px"),h.$slideTitles=t('<ul class="slides--titles"></ul>')}function r(){h.$slider.addClass("slides--anim")}function u(){var t=h.index?"transform: translate3d(-"+h.index*h.slideWidth+"px, 0, 0); ":"";h.slideWidth=h.$el.width(),h.$slider.attr("style",t+"width: "+h.slideCount*h.slideWidth+"px"),h.$slides.width(h.slideWidth+"px")}var h=this;h.autoMode=null,h.el=i,h.$el=t(i),h.index=0,h.defaultOptions={autoplay:!1,fx:"slide",timing:2e3,titles:"top"},h.options=t.extend({},h.defaultOptions,e),h.init=function(){return o(),h.slideCount<2?void console.error("Your HTML must contain at least two slides to flex."):(d(),"string"==typeof h.options.fx&&"slide"===h.options.fx&&(r(),a()),void(h.options.autoplay?s():n()))},h.init()}t.fn.jFlex=function(t){return this.each(function(){new i(this,t)})}}(jQuery);
+
;(function($){
 +
 
 +
function jFlex(el, options){
 +
 
 +
var base = this;
 +
 
 +
base.autoMode = null;
 +
base.el = el;
 +
base.$el = $(el);
 +
base.index = 0;
 +
base.defaultOptions = {
 +
autoplay: false,
 +
fx: 'slide',
 +
timing: 5000,
 +
titles: 'top'
 +
};
 +
 +
base.options = $.extend({}, base.defaultOptions, options);
 +
 
 +
function flex(event, autoplay) {
 +
 
 +
var idx = (typeof event === 'number') ? event : $(this).index();
 +
var transform = (!idx) ? '' : 'transform: translate3d(-' + (idx * base.slideWidth) + 'px, 0, 0); ';
 +
var width = 'width: ' + (base.slideCount * base.slideWidth) + 'px';
 +
 
 +
base.index = idx;
 +
base.$slider.attr('style', transform + width);
 +
 
 +
if (typeof event !== 'number' && base.autoMode) {
 +
clearInterval(base.autoMode);
 +
}
 +
 +
base.$slideTitles.find('li').attr('class', '');
 +
 
 +
if (autoplay) {
 +
if (idx === 0) {
 +
base.$slideTitles.find('li:eq(' + (base.slideCount - 1) + ')').attr('class', 'title--auto title--right');
 +
base.$slideTitles.find('li:eq(' + idx + ')').attr('class', 'title--active title--auto');
 +
} else {
 +
base.$slideTitles.find('li:eq(' + (idx - 1) + ')').attr('class', (autoplay) ? 'title--right title--auto' : 'title--right');
 +
base.$slideTitles.find('li:eq(' + idx + ')').attr('class', (autoplay) ? 'title--active title--auto' : 'title--active');
 +
}
 +
} else {
 +
base.$slideTitles.find('li:eq(' + idx + ')').attr('class', 'title--active');
 +
}
 +
 
 +
// trigger css repaint / reflow
 +
base.$el.offset().height;
 +
 
 +
}
 +
 
 +
function playBall(){
 +
var idx = 0;
 +
base.autoMode = setInterval(function(){
 +
idx = (idx === base.slideCount - 1) ? 0 : idx + 1;
 +
flex(idx, true);
 +
}, base.options.timing);
 +
base.$slideTitles.children().first().attr('class', 'title--active title--auto');
 +
}
 +
 
 +
function selectFirstTitle(){
 +
base.$slideTitles.children().first().attr('class', 'title--active');
 +
}
 +
 
 +
function bindFlex(){
 +
base.$slideTitles.children().bind('click', flex);
 +
base.$slides.find('img').bind('dragstart', function(event) { event.preventDefault(); });
 +
$(window).bind('resize orientationchange', flexSize);
 +
}
 +
 
 +
function bindTouch(){
 +
 
 +
var diff = 0,
 +
direction,
 +
origMouseX;
 +
 
 +
function dragStart(event) {
 +
if (base.autoMode) {
 +
clearInterval(base.autoMode);
 +
}
 +
var orig = (event.type === 'mousedown') ? event.originalEvent : event.originalEvent.touches[0];
 +
origMouseX = orig.pageX;
 +
base.$slider.bind('touchmove', dragMove)
 +
.bind('mousemove', dragMove)
 +
.bind('mouseleave', dragOff)
 +
.bind('mouseup', dragOff)
 +
.bind('touchend', dragOff)
 +
.bind('touchcancel', dragOff)
 +
.removeClass('slides--anim');
 +
base.$slideTitles.children().removeClass('title--auto');
 +
}
 +
 
 +
function dragMove(event) {
 +
var origEv = (event.type === 'touchmove') ? event.originalEvent.touches[0] : event.originalEvent;
 +
var mouseX = origEv.pageX;
 +
diff = Math.round(mouseX - origMouseX);
 +
direction = (diff < 0) ? '<' : '>';
 +
var offset = (base.index * -base.slideWidth) + diff;
 +
if (direction === '>' && base.index === 0 ||
 +
direction === '<' && base.index === (base.slideCount - 1)) {
 +
return;
 +
}
 +
base.$slider.attr('style', 'width: ' + (base.slideWidth * base.slideCount) + 'px; transform: translate3d(' + offset + 'px, 0, 0)');
 +
}
 +
 
 +
function dragOff(event) {
 +
var newIndex = (direction === '<') ? base.index + 1 : base.index - 1,
 +
origEv = (event.type === 'touchend' || event.type === 'touchcancel') ? event.originalEvent.changedTouches[0] : event.originalEvent;
 +
var mouseX = origEv.pageX,
 +
offset = base.index * base.slideWidth;
 +
diff = Math.round(mouseX - origMouseX);
 +
base.$slider.unbind('touchmove', dragMove)
 +
.unbind('mousemove', dragMove)
 +
.unbind('mouseleave', dragOff)
 +
.unbind('mouseup', dragOff)
 +
.unbind('touchend', dragOff)
 +
.unbind('touchcancel', dragOff)
 +
.addClass('slides--anim');
 +
if (direction === '>' && base.index === 0 ||
 +
direction === '<' && base.index === (base.slideCount - 1)) {
 +
return;
 +
}
 +
if (diff > 140 || diff < -140) {
 +
flex(newIndex);
 +
return;
 +
}
 +
base.$slider.attr('style', 'width: ' + (base.slideWidth * base.slideCount) + 'px; transform: translate3d(-' + offset + 'px, 0, 0)');
 +
}
 +
 
 +
base.$slider.bind('touchstart', dragStart);
 +
base.$slider.bind('mousedown', dragStart);
 +
 
 +
}
 +
 
 +
function setGlobals(){
 +
base.$el.addClass('jFlex');
 +
base.$slider = base.$el.children();
 +
base.$slides = base.$slider.children();
 +
base.slideCount = base.$slides.length;
 +
base.slideWidth = base.$el.width();
 +
 
 +
base.$slides.width(base.slideWidth + 'px');
 +
base.$el.children().width(base.slideCount * base.slideWidth + 'px');
 +
 
 +
base.$slideTitles = $('<ul class="slides--titles"></ul>');
 +
}
 +
 
 +
function flexAnimated(){
 +
base.$slider.addClass('slides--anim');
 +
}
 +
 
 +
function flexSize(){
 +
var transform = !base.index ? '' : 'transform: translate3d(-' + (base.index * base.slideWidth) + 'px, 0, 0); ';
 +
base.slideWidth = base.$el.width();
 +
base.$slider.attr('style', transform + 'width: ' + (base.slideCount * base.slideWidth) + 'px');
 +
base.$slides.width(base.slideWidth + 'px');
 +
}
 +
 
 +
function flexTitles(){
 +
 
 +
}
 +
 
 +
base.init = function(){
 +
 
 +
setGlobals();
 +
 
 +
if (base.slideCount < 2) {
 +
console.error('Your HTML must contain at least two slides to flex.');
 +
return;
 +
}
 +
 
 +
flexTitles();
 +
bindFlex();
 +
 
 +
if (typeof base.options.fx === 'string' && base.options.fx === 'slide') {
 +
flexAnimated();
 +
bindTouch();
 +
}
 +
 
 +
if (base.options.autoplay) {
 +
playBall();
 +
} else {
 +
selectFirstTitle();
 +
}
 +
 
 +
};
 +
 
 +
base.init();
 +
 
 +
}
 +
 +
$.fn.jFlex = function(options){
 +
return this.each(function(){
 +
(new jFlex(this, options));
 +
});
 +
};
 +
 
 +
})(jQuery);

Latest revision as of 13:37, 6 October 2018

(function($){

function jFlex(el, options){

var base = this;

base.autoMode = null; base.el = el; base.$el = $(el); base.index = 0; base.defaultOptions = { autoplay: false, fx: 'slide', timing: 5000, titles: 'top' };

base.options = $.extend({}, base.defaultOptions, options);

function flex(event, autoplay) {

var idx = (typeof event === 'number') ? event : $(this).index(); var transform = (!idx) ?  : 'transform: translate3d(-' + (idx * base.slideWidth) + 'px, 0, 0); '; var width = 'width: ' + (base.slideCount * base.slideWidth) + 'px';

base.index = idx; base.$slider.attr('style', transform + width);

if (typeof event !== 'number' && base.autoMode) { clearInterval(base.autoMode); }

base.$slideTitles.find('li').attr('class', );

if (autoplay) { if (idx === 0) { base.$slideTitles.find('li:eq(' + (base.slideCount - 1) + ')').attr('class', 'title--auto title--right'); base.$slideTitles.find('li:eq(' + idx + ')').attr('class', 'title--active title--auto'); } else { base.$slideTitles.find('li:eq(' + (idx - 1) + ')').attr('class', (autoplay) ? 'title--right title--auto' : 'title--right'); base.$slideTitles.find('li:eq(' + idx + ')').attr('class', (autoplay) ? 'title--active title--auto' : 'title--active'); } } else { base.$slideTitles.find('li:eq(' + idx + ')').attr('class', 'title--active'); }

// trigger css repaint / reflow base.$el.offset().height;

}

function playBall(){ var idx = 0; base.autoMode = setInterval(function(){ idx = (idx === base.slideCount - 1) ? 0 : idx + 1; flex(idx, true); }, base.options.timing); base.$slideTitles.children().first().attr('class', 'title--active title--auto'); }

function selectFirstTitle(){ base.$slideTitles.children().first().attr('class', 'title--active'); }

function bindFlex(){ base.$slideTitles.children().bind('click', flex); base.$slides.find('img').bind('dragstart', function(event) { event.preventDefault(); }); $(window).bind('resize orientationchange', flexSize); }

function bindTouch(){

var diff = 0, direction, origMouseX;

function dragStart(event) { if (base.autoMode) { clearInterval(base.autoMode); } var orig = (event.type === 'mousedown') ? event.originalEvent : event.originalEvent.touches[0]; origMouseX = orig.pageX; base.$slider.bind('touchmove', dragMove) .bind('mousemove', dragMove) .bind('mouseleave', dragOff) .bind('mouseup', dragOff) .bind('touchend', dragOff) .bind('touchcancel', dragOff) .removeClass('slides--anim'); base.$slideTitles.children().removeClass('title--auto'); }

function dragMove(event) { var origEv = (event.type === 'touchmove') ? event.originalEvent.touches[0] : event.originalEvent; var mouseX = origEv.pageX; diff = Math.round(mouseX - origMouseX); direction = (diff < 0) ? '<' : '>'; var offset = (base.index * -base.slideWidth) + diff; if (direction === '>' && base.index === 0 || direction === '<' && base.index === (base.slideCount - 1)) { return; } base.$slider.attr('style', 'width: ' + (base.slideWidth * base.slideCount) + 'px; transform: translate3d(' + offset + 'px, 0, 0)'); }

function dragOff(event) { var newIndex = (direction === '<') ? base.index + 1 : base.index - 1, origEv = (event.type === 'touchend' || event.type === 'touchcancel') ? event.originalEvent.changedTouches[0] : event.originalEvent; var mouseX = origEv.pageX, offset = base.index * base.slideWidth; diff = Math.round(mouseX - origMouseX); base.$slider.unbind('touchmove', dragMove) .unbind('mousemove', dragMove) .unbind('mouseleave', dragOff) .unbind('mouseup', dragOff) .unbind('touchend', dragOff) .unbind('touchcancel', dragOff) .addClass('slides--anim'); if (direction === '>' && base.index === 0 || direction === '<' && base.index === (base.slideCount - 1)) { return; } if (diff > 140 || diff < -140) { flex(newIndex); return; } base.$slider.attr('style', 'width: ' + (base.slideWidth * base.slideCount) + 'px; transform: translate3d(-' + offset + 'px, 0, 0)'); }

base.$slider.bind('touchstart', dragStart); base.$slider.bind('mousedown', dragStart);

}

function setGlobals(){ base.$el.addClass('jFlex'); base.$slider = base.$el.children(); base.$slides = base.$slider.children(); base.slideCount = base.$slides.length; base.slideWidth = base.$el.width();

base.$slides.width(base.slideWidth + 'px'); base.$el.children().width(base.slideCount * base.slideWidth + 'px');

base.$slideTitles = $('
    ');

    }

    function flexAnimated(){ base.$slider.addClass('slides--anim'); }

    function flexSize(){ var transform = !base.index ?  : 'transform: translate3d(-' + (base.index * base.slideWidth) + 'px, 0, 0); '; base.slideWidth = base.$el.width(); base.$slider.attr('style', transform + 'width: ' + (base.slideCount * base.slideWidth) + 'px'); base.$slides.width(base.slideWidth + 'px'); }

    function flexTitles(){

    }

    base.init = function(){

    setGlobals();

    if (base.slideCount < 2) { console.error('Your HTML must contain at least two slides to flex.'); return; }

    flexTitles(); bindFlex();

    if (typeof base.options.fx === 'string' && base.options.fx === 'slide') { flexAnimated(); bindTouch(); }

    if (base.options.autoplay) { playBall(); } else { selectFirstTitle(); }

    };

    base.init();

    }

    $.fn.jFlex = function(options){ return this.each(function(){ (new jFlex(this, options)); }); };

    })(jQuery);