Javascriptでマウスドラッグ時にページ全体を横にスライド(iPhone的な感じの
-
以下のJavascriptを使用するとマウスドラッグ時にページ全体を横にスライドさせることができるのですが、
このスライドの動きにイージングをつけて、もう少しスムーズな動きにしたいのですが、
どのような記述をしたらよいのかお助け下さい。(iPhone的な感じのイージングを実装したい)
サンプル:
http://www.anishaacharya.com/w/
<HEAD> <script type="text/javascript"> <!-- Begin document.onmousedown = function(){ var e=arguments[0]||event; var x=zxcWWHS()[2]+e.clientX; var y=zxcWWHS()[3]+e.clientY; document.onmousemove=function(){ var e=arguments[0]||event; window.scroll(x-e.clientX, y-e.clientY); return false; } document.onmouseup=function(){ document.onmousemove=null; } return false; } function zxcWWHS(){ if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset]; else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop]; return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop]; } window.onload = function() { HtinyScrolling.init(); scrollTips.init(); } function gotoit(target){ HtinyScrolling.scrollToIt(target); } var HtinyScrolling = { speed : 20, //set here the scroll speed: when this value increase, the speed decrease. maxStep: 100, //set here the "uniform motion" step for long distances brakeK: 5, //set here the coefficient of slowing down hash:null, currentBlock:null, requestedX:0, init: function() { var lnks = document.getElementsByTagName('a'); for(var i = 0, lnk; lnk = lnks[i]; i++) { if ((lnk.href && lnk.href.indexOf('#') != -1) && ( (lnk.pathname == location.pathname) || ('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) { addEvent(lnk,'click',HtinyScrolling.initScroll,false); lnk.onclick=function(){return false;} // Safari } } }, getTarget: function(target) { while(target.tagName.toLowerCase() != 'a') target = target.parentNode; return target; }, getElementXpos: function(el){ var x = 0; while(el.offsetParent){ x += el.offsetLeft; el = el.offsetParent; } return x; }, getScrollLeft: function(){ if(document.all) return (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft; else return window.pageXOffset; }, getWindowWidth: function(){ if (window.innerWidth) return window.innerWidth; if(document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth; }, getDocumentWidth: function(){ if (document.width) return document.width; if(document.body.offsetWidth) return document.body.offsetWidth; }, initScroll: function(e){ var targ; if (!e) var e = window.event; if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement; targ = HtinyScrolling.getTarget(targ); //a fix by Skid X HtinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length); HtinyScrolling.currentBlock = document.getElementById(HtinyScrolling.hash); if(!HtinyScrolling.currentBlock) return; HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock); HtinyScrolling.scroll(targ); return false; }, scrollToIt: function(targ){ //thanks to Michael Ionita-Ganea target = document.getElementById(targ); HtinyScrolling.currentBlock = document.getElementById(targ); if(!HtinyScrolling.currentBlock) return; HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock); HtinyScrolling.scroll(target); return false; }, scroll: function(targ) { var left = HtinyScrolling.getScrollLeft(); if(HtinyScrolling.requestedX > left) { //a fix by Michael Ionita-Ganea var endDistance = Math.round((HtinyScrolling.getDocumentWidth() - (left + HtinyScrolling.getWindowWidth())) / HtinyScrolling.brakeK); endDistance = Math.min(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK), endDistance); var offset = Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep); }else { var offset = - Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep); } window.scrollTo(left + offset, 0); if(Math.abs(left-HtinyScrolling.requestedX) <= 1 || HtinyScrolling.getScrollLeft() == left) { HtinyScrolling.hash = null; } else setTimeout(HtinyScrolling.scroll,HtinyScrolling.speed); } } var scrollTips = { dx : null, init : function() { if (window.addEventListener) { window.addEventListener("DOMMouseScroll", this.mouseScroll, false); } else document.attachEvent("onmousewheel", this.mouseScroll); var left = document.getElementById('left'); addEvent(left,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(0)',100);return false;}); addEvent(left,'mouseout', function() { clearInterval(this.dx); return false;}); var right = document.getElementById('right'); addEvent(right,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(1)',100);return false;}); addEvent(right,'mouseout', function() { clearInterval(this.dx); return false;}); }, mouseScroll : function(e) { if (!e) var e = window.event; var scroll = e.detail ? e.detail * 20 : e.wheelDelta / -20; if (scroll>=0 ){ window.scrollBy(100,0); } else window.scrollBy(-100,0) ; }, arrowScroll: function(val) { if(val==1) { window.scrollBy(100,0); } else { window.scrollBy(-100,0) } } } function addEvent( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent( "on"+type, obj[type+fn] ); } } function removeEvent( obj, type, fn ) { if (obj.removeEventListener) obj.removeEventListener( type, fn, false ); else if (obj.detachEvent) { obj.detachEvent( "on"+type, obj[type+fn] ); obj[type+fn] = null; obj["e"+type+fn] = null; } } // End --> </script> </head> <body> <div id="header"> </div>
1件の返信を表示中 - 1 - 1件目 (全1件中)
1件の返信を表示中 - 1 - 1件目 (全1件中)
- トピック「Javascriptでマウスドラッグ時にページ全体を横にスライド(iPhone的な感じの」には新たに返信することはできません。