手機觸屏觸控特效javascript-TouchSwipe（依賴於jquery庫）中文說明
阿新 • • 發佈：2019-02-06
注意：此外掛雖好，但是需要注意的是如果手指事件會在a標籤超連結內失效，筆者做了一個焦點圖，如果圖片上有A標記的話會失效，所以在官方沒有改正之前，還是放棄吧。。。。（另一個手機觸控外掛jQuery Touchwipe Plugin 輕量級的手機觸控特效外掛（javascript））
事件：
滑動事件：
swipe (事件，滑動的方向，滑動的距離，一次滑動的時間 , 幾根手指)
滑動事件還有 方法和上面相同 swipeLift – 向左滑動 swipeRight-向右滑動 swipeUp-向上滑動 swipeDown-向下滑動
swipeStatus (事件, 手指狀態，滑動的方向，滑動的距離，一次滑動的時間 , 幾根手指)
swipeStatus 和 swipe 不同的是 這個引數是一直在執行的，大家可以看看下面的例子（複製到記事本上開啟即可），來了解一下兩個事件的不同之處。
兩根手指往裡捏或者擴張事件：
pinchStatus(事件,手指狀態 ,方向(in和out，需要注意的一點in是往外擴，out是往裡捏),滑動的距離, 一次滑動的時間 , 幾根手指, 變焦)
包含：pinchIn（向外擴張），pinchOut （向裡捏）
其他常用事件還有：doubleTap （雙擊螢幕） click （單擊螢幕） longTap (長按螢幕)
滑動事件demo：
| 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 |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312" />
<title>無標題文件</title>
<script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.min.js"></script>
<scripttype="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.touchSwipe.min.js"></script>
<script>
$(function()
{
//swipe
的dome
$("#test").swipe(
{
swipe:function(event,
direction, distance, duration, fingerCount) {
$(this).text("你用"+fingerCount+"個手指以"+duration+"秒的速度向"
+ direction + "滑動了" +distance+ "畫素 " );
},
});
//swipeStatus的dome
$("#test2").swipe(
{
swipeStatus:function(event,
phase, direction, distance, duration,fingerCount) {
$(this).text("你用"+fingerCount+"個手指以"+duration+"秒的速度向"
+ direction + "滑動了" +distance+ "畫素 " +"你在"+phase+"中");
},
});
});
</script>
</head>
<body>
<div id="test" style="height:200px;
background:#C63;-webkit-user-select:none; text-align:center; line-height:200px; color:#fff">swipe
的dome</div>
<div id="test2" style="height:200px;
background:#C63; margin-top:20px;-webkit-user-select:none; text-align:center; line-height:200px; color:#fff">swipeStatus的dome</div>
</body>
</html>
|
官方網站
英文說明地址：
下載地址