スキップしてメイン コンテンツに移動

Webページにスワイプインタフェースを追加するスクリプト

By Tom Raftery
 指をスライドさせてページ送りをしたりするスワイプという操作ですが、自分のWebサイトにもコレを使うと簡単に導入できそうです。

このスクリプトを自分のページのヘッダ部分に組み込んで、動かしたいブロック要素に"swipeBox"というidをつけてやるみたいです。

<div id="swipeBox" ontouchstart="touchStart(event,'swipeBox');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">

↑こんな感じね。(うーん、見慣れないイベントだw)
で、動作デモがこちら(iPadで見てね)> Swipe Example

なんで、こんなモヤモヤっとした表現かというと、iPadが無いんです。試せないんです。デモサイトは当然Chromeちゃんでは動きませんでした。Android端末からなら動くのかな?iPad頂戴。

というわけで、詳しい解説は、↓で!(英語)
>>PADILICIOUS: How to Add Finger-Swipe Support to Your Webpage

コメント