kurubusi.slider.js
ドロワーメニューやスワイプギャラリー等に使えるスライダースクリプトです。
勿論レスポンシブなので、スマホではスワイプで操作可能、PCではマウスムーブをマウスホイールに対応しています。
注：スライダーの部分のみのスクリプトです。
特記する特徴
同一ページ内で複数使用できます。
IDを変えれば同一ページ内で複数使えます。
レスポンシブ対応
PCではマウスイベント・ホイールイベント、スマホではタッチイベントで操作できます。
イージングがちょっといい感じ
ただスクロールするだけではなく、手を離した後にも惰性でいい感じに進みます。
デモ
ダウンロード
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公開。
