イベントとかでstyle変更するjavascript
Javascript

スライダー jQueryに依存しない何かと使えるレスポンシブスライダー


kurubusi.slider.js

ドロワーメニューやスワイプギャラリー等に使えるスライダースクリプトです。
勿論レスポンシブなので、スマホではスワイプで操作可能、PCではマウスムーブをマウスホイールに対応しています。
注:スライダーの部分のみのスクリプトです。

特記する特徴

同一ページ内で複数使用できます。

IDを変えれば同一ページ内で複数使えます。

レスポンシブ対応

PCではマウスイベント・ホイールイベント、スマホではタッチイベントで操作できます。

イージングがちょっといい感じ

ただスクロールするだけではなく、手を離した後にも惰性でいい感じに進みます。

デモ

ダウンロード

→ It downloads by GitHub.

KURUBUSISLIDER コード

コピペしてそのまま使えます。

呼び出し

KURUBUSISLIDER({
	target: 'c',
	parlent: 'w',
	speedrate: 150,
	durationrateY: 5,
	direction: 'y'
});
target
実際にスクロールするオブジェクトのIDかオブジェクトを指定必須
parlent
スクロールするオブジェクトの基準となるオブジェクトのIDかオブジェクトを指定。
parlentがrelativeになってそこを基準にtargetがabsoluteで動きます。必須

オプション

speedrate
惰性で進むときのスピードレートを指定。デフォルトで150
durationrateY or durationrateX
惰性で進む距離のレートを指定。デフォルトで5
y or x
縦(y)にスクロールするか横(x)にスクロールするか指定。省略時は縦(y)

CSS

#w	{  //parlentになるオブジェクトにはheightを設定して下さい
	height:500px;
}

#c	{  //x方向にスクロースする時はtargetにwidthを指定して下さい。
	width: 1000px;
}

KURUBUSISLIDER

コピペしてそのまま使えます。

var KURUBUSISLIDER = function(obj){
	
	
	
	var Slider = function(){
		var this_ = this,
				args = Array.prototype.slice.call(arguments);
		
		this.w = (args[0].parlent && typeof args[0].parlent === "string") ? document.getElementById(args[0].parlent) : args[0].parlent;
		this.c = (args[0].target && typeof args[0].target === "string") ? document.getElementById(args[0].target) : args[0].target;
		this.speedrate = args[0].speedrate || 150;
		this.durationrateY = args[0].durationrateY || 5;
		this.durationrateX = args[0].durationrateX || 5;
		this.direction = args[0].direction || 'y';
		
		
		var objstyleheight = this.objtComputedStyle(this.c, 'height'),
				objstylewidth = this.objtComputedStyle(this.c, 'width'),
				wheight = this.objtComputedStyle(this.w, 'height'),
				wwidth = this.objtComputedStyle(this.w, 'width');
		
		this.w.style.overflow = 'hidden';
		this.w.style.position = 'relative';
		this.c.style.position = 'absolute';
		
		
		this.overdiv = document.createElement('div');
		this.overdiv.style.width = (parseFloat(document.defaultView.getComputedStyle(this.c, '')['width'])) + 'px';
		this.overdiv.style.height = (parseFloat(document.defaultView.getComputedStyle(this.c, '')['height'])) + 'px';
		this.overdiv.style.position = 'absolute';
		//this.overdiv.style.opacity = '0.5';
		//this.overdiv.style.backgroundColor = 'red';
		this.overdiv.style.top = '0';
		this.overdiv.style.left = '0';
		this.c.appendChild(this.overdiv);
		
		if(this.direction === 'y' && objstyleheight < wheight){
			this.c.style.paddingBottom = (wheight - (parseFloat(document.defaultView.getComputedStyle(this.c, '')['height']))) + 'px';
		}else{
			this.managedMB(this.c);
			this.managedPCdrag(this.c);
			this.managedPCwheel(this.c);
		}
		
	};
	
	
	//PC Wheel
	Slider.prototype.managedPCwheel = function(target){
		var this_ = this,
				begin,
				touchStartX,
				touchStartY,
				touchMoveX,
				touchMoveY,
				moveingObj = [],
				mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
		try{
			addEventSet(target, mousewheelevent, function(event){
				onWheel(event);
			});
		}catch(e){
			addEventSet(target, mousewheel, function(event){
				onWheel(event);
			});
		}
		var onWheel = function(event){
			if(!event) event = window.event; //for legacy IE
			var delta = event.deltaY ? -(event.deltaY) : event.wheelDelta ? event.wheelDelta : -(event.detail),
					objstylewidth = (this_.objtComputedStyle(target, 'width') || 0),
					objstyleheight = (this_.objtComputedStyle(target, 'height') || 0);
					objstyletop = (this_.objtComputedStyle(target, 'top') || 0),
					objstyleleft = (this_.objtComputedStyle(target, 'left') || 0);
			this_.stopEvent(event);
			
			begin = (new Date()).getTime();
			
			moveingObj.push({
				'target': target,
				'touchMoveY': objstyletop + delta,
				'touchStartY': objstyletop,
				'touchMoveX': objstyleleft,
				'touchStartX': objstyleleft,
				'touchLayerX': 0,
				'touchLayerY': 0,
				'd_time': (((new Date()).getTime()) - begin)
			});
			this_.touchingMove(moveingObj);
			
		};
	};
	
	
	//PC Drag and drop
	Slider.prototype.managedPCdrag = function(target){
		var this_ = this,
				begin,
				touchStartX,
				touchStartY,
				touchMoveX,
				touchMoveY,
				flag = false,
				moveingObj = [];
		
		//mousedown
		addEventSet(target, "mousedown", function(event) {
			
			
			this_.stopEvent(event);
			begin = (new Date()).getTime();
			
			
			touchStartX = event.pageX || (event.clientX + document.documentElement.scrollLeft);
			touchStartY = event.pageY || (event.clientY + document.documentElement.scrollTop);
			touchLayerX = event.layerX || event.offsetX;
			touchLayerY = event.layerY || event.offsetY;
			
			flag = true;
		});
		
		//mousemove
		addEventSet(target, "mousemove", function(event) {
			if (!flag) return;
			this_.stopEvent(event);
			
			moveingObj.push({
				'target': target,
				'touchMoveY': event.pageY,
				'touchStartY': touchStartY,
				'touchMoveX': event.pageX,
				'touchStartX': touchStartX,
				'touchLayerX': touchLayerX,
				'touchLayerY': touchLayerY,
				'd_time': (((new Date()).getTime()) - begin)
			});
			
			this_.touchingMove(moveingObj);
			
		});
		
		//mouseout
		addEventSet(target, "mouseout", function(event) {
			flag = false;
			if(moveingObj[0]){
				this_.touchdMove(moveingObj);
				moveingObj.length = 0;
			}
		});
		
		//mouseup
		addEventSet(target, "mouseup", function(event) {
			flag = false;
			if(moveingObj[0]){
				this_.touchdMove(moveingObj);
				moveingObj.length = 0;
			}
		});
	};
	
	
	//MB
	Slider.prototype.managedMB = function(target){
		var this_ = this,
				begin,
				touchStartX,
				touchStartY,
				touchMoveX,
				touchMoveY,
				flag = false,
				moveingObj = [];
		
		//touchstart
		addEventSet(target, "touchstart", function(event) {
			this_.stopEvent(event);
			moveingObj.length = 0;
			begin = (new Date()).getTime();
			
			touchStartX = event.touches[0].pageX;
			touchStartY = event.touches[0].pageY;
			touchLayerX = event.changedTouches[0].pageX - target.offsetLeft;
			touchLayerY = event.changedTouches[0].pageY - target.offsetTop;
			
			flag = true;
		});
		
		//touchmove
		addEventSet(target, "touchmove", function(event) {
			if (!flag) return;
			this_.stopEvent(event);
			moveingObj.push({
				'target': target,
				'touchMoveY': event.changedTouches[0].pageY,
				'touchStartY': touchStartY,
				'touchMoveX': event.changedTouches[0].pageX,
				'touchStartX': touchStartX,
				'touchLayerX': touchLayerX,
				'touchLayerY': touchLayerY,
				'd_time': (((new Date()).getTime()) - begin)
			});
			
			this_.touchingMove(moveingObj);
		});
		
		//touchcancel
		addEventSet(target, "touchcancel", function(event) {
			flag = false;
			if(moveingObj[0]){
				this_.touchdMove(moveingObj);
			}
		});
		
		//touchend
		addEventSet(target, "touchend", function(event) {
			flag = false;
			if(moveingObj[0]){
				this_.touchdMove(moveingObj);
			}
		});
		
	};
	
	
	//repeatedly mouse
	Slider.prototype.touchingMove = function(moveobj){
		var this_ = this,
				lastobj = moveobj[moveobj.length-1],
				objstyletop = (this.objtComputedStyle(lastobj.target, 'top') || 0),
				objstyleleft = (this.objtComputedStyle(lastobj.target, 'left') || 0),
				objstylebottom = (this.objtComputedStyle(lastobj.target, 'bottom') || 0),
				objstyleright = (this.objtComputedStyle(lastobj.target, 'right') || 0),
				objstylewidth = (this.objtComputedStyle(lastobj.target, 'width') || 0),
				objstyleheight = (this.objtComputedStyle(lastobj.target, 'height') || 0),
				wwidth = this.objtComputedStyle(this.w, 'width'),
				wheight = this.objtComputedStyle(this.w, 'height'),
				moveY,
				moveX;
		
		moveY = lastobj.touchMoveY - lastobj.touchLayerY;
		moveX = lastobj.touchMoveX - lastobj.touchLayerX;
		
		if(this.direction === 'x'){
			if(wwidth - objstylewidth > moveX){
				moveX = wwidth - objstylewidth;
			}else if(moveX > 0){
				moveX = 0;
			}
			lastobj.target.style.left = moveX + 'px';
		}else{
			if(wheight - objstyleheight > moveY){
				moveY = wheight - objstyleheight;
			}else if(moveY > 0){
				moveY = 0;
			}
			lastobj.target.style.top  = moveY + 'px';
		}
		
		
	};
	
	//After having separated it
	Slider.prototype.touchdMove = function(moveobj){
		var this_ = this,
				lastobj = moveobj[moveobj.length-1],
				moveobjlength = moveobj.length,
				objstyletop = (this.objtComputedStyle(lastobj.target, 'top') || 0),
				objstyleleft = (this.objtComputedStyle(lastobj.target, 'left') || 0),
				objstylewidth = (this.objtComputedStyle(lastobj.target, 'width') || 0),
				objstyleheight = (this.objtComputedStyle(lastobj.target, 'height') || 0),
				wwidth = this.objtComputedStyle(this.w, 'width'),
				wheight = this.objtComputedStyle(this.w, 'height'),
				begin = new Date(),
				x,
				moveX,
				y,
				moveY,
				duration,
				dr,
				toX,
				toY,
				speed,
				recently = [];
		
		for(var i = 1; i <= 10; i++){
			if(moveobj[moveobjlength - i]){
				recently.unshift(moveobj[moveobjlength - i]);
			}
		}
		//console.log(recently);
		
		dr = Math.sqrt(Math.pow((recently[recently.length-1].touchMoveX-recently[0].touchMoveX),2) + Math.pow((recently[recently.length-1].touchMoveY-recently[0].touchMoveY),2));
		
		speed = dr / (recently[recently.length-1].d_time - recently[0].d_time);
		duration = speed * this.speedrate;
		
		moveX = (recently[recently.length-1].touchMoveX - recently[0].touchMoveX) * this.durationrateX;
		moveY = (recently[recently.length-1].touchMoveY - recently[0].touchMoveY) * this.durationrateY;
		
		
		toX = objstyleleft + moveX;
		toY = objstyletop + moveY;
		
		if(duration && duration > 100){
			var timer = setInterval(function(){
				var time = new Date() - begin,
						cuY = easeOutQuad(time, objstyletop, moveY, duration),
						cuX = easeOutQuad(time, objstyleleft, moveX, duration);
				if (time > duration){
					clearInterval(timer);
					cuX = toX;
					cuY = toY;
				}
				if(this_.moveflg){
					clearInterval(timer);
				}
				if(this_.direction === 'x'){
					if(wwidth - objstylewidth > cuX){
						cuX = wwidth - objstylewidth;
						clearInterval(timer);
					}else if(cuX > 0){
						cuX = 0;
						clearInterval(timer);
					}
					lastobj.target.style.left = cuX + 'px';
				}else{
					if(wheight - objstyleheight > cuY){
						cuY = wheight - objstyleheight;
						clearInterval(timer);
					}else if(cuY > 0){
						cuY = 0;
						clearInterval(timer);
					}
					lastobj.target.style.top = cuY + 'px';
				}
				
			},10);
		}
		
	};
	
	
	//preventDefault
	Slider.prototype.stopEvent = function(event){
		if (event.preventDefault) {
			event.preventDefault();
		}
		event.returnValue = false;
	};
	
	Slider.prototype.objtComputedStyle = function(obj, properties){
		return parseFloat((obj.currentStyle || document.defaultView.getComputedStyle(obj, ''))[properties]);
	};
	
	
	
	
	/////////////////////////
	switchArea = function(serchclass, serchtag) {
		var par = document,
				reg = new RegExp('(^| +)' + serchclass + '($| +)'),
				nodeList = [];
		
		if (serchtag === undefined) {
			serchtag = '*';
		}
		var el = par.getElementsByTagName(serchtag);
		for (var i = 0; i < el.length; i++) {
			if (reg.test(el[i].className)){
				nodeList.push(el[i]);
			}
		}
		return nodeList;
	};
	
	addEventSet = function(elm,listener,fn){
		try { elm.addEventListener(listener,fn,false);}
		catch(e){ elm.attachEvent("on"+listener,fn);};
	};
	
	extendDeep = function(parent, child){
		var i,
				toStr = Object.prototype.toString,
				astr = "[object Array]";
		child = child || {};
		for(i in parent){
			if(parent.hasOwnProperty(i)){
				if(typeof parent[i] === "object"){
					child[i] = (toStr.call(parent[i]) === astr) ? [] : {};
					extendDeep(parent[i], child[i]);
				}else{
					child[i] = parent[i];
				}
			}
		}
		return child;
	};
	
	addEventSet = function(elm,listener,fn){
		try { elm.addEventListener(listener,fn,false);}
		catch(e){ elm.attachEvent("on"+listener,fn);};
	};
	
	addReadyFunction = function(func){
		if(document.addEventListener){
			document.addEventListener("DOMContentLoaded" , func , false) ;
		}else if(window.ActiveXObject){
			var ScrollCheck = function(){
				try {
					document.documentElement.doScroll("left");
				} catch(e) {
					setTimeout(ScrollCheck , 1 );
					return;
				} 
				// and execute any waiting functions
				func();
			}
			ScrollCheck();
		}
	}
	
	
	uniqueId = function(){
		var randam = Math.floor(Math.random()*1000)
		var date = new Date();
		var time = date.getTime();
		return randam + time.toString();
	}
	
	
	isArray = function(o){
		return Object.prototype.toString.call(o) === '[object Array]';
	}
	
	//t:current time b:startcoordinates c:Distance d:necessary time
	easing = function(t,b,c,d){
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	};
	
	easeOutQuad = function (t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
	}
	
	
	addReadyFunction(function(){
		new Slider(obj);
	});
	
	
}; //-- KURUBUSISLIDER --//

更新履歴

2014/10/26
1.0.02_publicbeta公開。

著者