マウスでフリックをしたい！
マウスでのフリックはライブラリを使用したりとか、ちょっと難しい部分もあるので敬遠しがちですが、
html css jsの3ファイルにコピペするだけで簡単に実装できます。
まずはhtmlファイルからですが、構成は上記のようになるので使う要素は2つだけです。
下記をhtml css jsファイルにコピペで実装可能
htmlファイル
|
1 2 3 4 5 |
<div class="wrap"> <div class="inner"> ここにスクロールとフリックの対象となるコンテンツ内容 </div> </div> |
cssファイル
|
1 2 3 4 5 6 7 8 9 |
.wrap{ overflow: scroll; position: relative; } .inner{ position: absolute; left:0; top:0; } |
.innerの横幅を指定することで.wrapからはみ出た部分をスクロールできます。
あとは問題のフリックです。特に難しいことは考えずコピペして下さい。
jsファイルにコピペ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
$(document).ready(function () { var divheight = $(".inner").height(); $(".wrap").css('height',divheight); }); $(window).resize(function () { var divheight = $(".inner").height(); $(".wrap").css('height',divheight); }); $('.inner').on({ 'touchstart': function(e) { this.touchX = event.changedTouches[0].pageX; this.slideX = $(this).position().left; }, 'touchmove': function(e) { e.preventDefault(); this.slideX = this.slideX - (this.touchX - event.changedTouches[0].pageX ); $(this).css({left:this.slideX}); this.accel = (event.changedTouches[0].pageX - this.touchX) * 5; this.touchX = event.changedTouches[0].pageX; }, 'touchend': function(e) { var tablewidth = $(".wrap").width(); var tableinner = $(".inner").width(); table_wrap_width = tableinner - tablewidth; this.slideX += this.accel $(this).animate({left : this.slideX },200,'linear'); this.accel = 0; if (this.slideX > 0) { this.slideX = 0; $(this).animate({left:"0px"},500); } if (this.slideX < -table_wrap_width) { this.slideX = -table_wrap_width; $(this).animate({left:-table_wrap_width},500); } } }); $('.inner').mousedown(function(e){ this.touchX = event.pageX; this.slideX = $(this).position().left; $('.inner').mousemove(function(e){ e.preventDefault(); this.slideX = this.slideX - (this.touchX - event.pageX ); $(this).css({left:this.slideX}); this.accel = (event.pageX - this.touchX) * 5; this.touchX = event.pageX; }); }).mouseup(function(e){ var tablewidth = $(".wrap").width(); var tableinner = $(".inner").width(); table_wrap_width = tableinner - tablewidth; this.slideX += this.accel $(this).animate({left : this.slideX },200,'linear'); this.accel = 0; if (this.slideX > 0) { this.slideX = 0; $(this).animate({left:"0px"},500); } if (this.slideX < -table_wrap_width) { this.slideX = -table_wrap_width; $(this).animate({left:-table_wrap_width},500); } $('.inner').off("mousemove"); }); |
ぜひ試してみて下さい。