Zepto
github地址: https://github.com/madrobby/zepto
官方地址: http://zeptojs.com/
中文版地址: http://www.css88.com/doc/zeptojs_api/
Zepto就是jQuery的移動端版本, 可以看做是一個輕量級的jQuery
注意點
Zepto的設計目的是提供 jQuery 的類似的API，但并不是100%覆蓋 jQuery
jQuery的底層是通過DOM來實現效果的， zepto.js 是用css3 來實現的；
官網下載的zepto,就已經包含了官網所述的默認模塊了
github上下載的zepto模塊需要自己導入
<!--<!–引入核心模塊；包含許多jQuery中常見方法–>--> <script src="js/zepto.js"></script> <!--<!–引入zepto事件模塊, 包含了常見的事件方法on/off/click ...–>--> <script src="js/event.js"></script> <!--<!–引入zepto動畫模塊,–>--> <script src="js/fx.js"></script> <!--<!–引入zepto動畫模塊的常用方法,–>--> <script src="js/fx_methods.js"></script>
Zepto點擊事件
由于移動端的手勢多而且分單擊雙擊,所以移動端的click事件有300ms左右的延遲,所以移動端的點擊事件用tab
$("div").tap(function(){
......
})zepto中touch相關事件
touchstart
touchstart是手指剛觸摸到元素時觸發的事件
touchmove
touchmove是手指移動時觸發的事件
touchend
當手指離開指定元素時觸發
注意點
添加以上三個事件的時候用addEventListener
以上三個事件對pc端無效
zepto中touch事件的對象
touches:
保存了屏幕上所有手指的列表
targetTouches
保存了元素上所有手指的列表
changedTouches
包含了剛剛與屏幕接觸的手指或者剛剛離開屏幕的手指
TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList}zepto中touch事件的XY
client: 可視區域
page: 內容
var oDiv = document.querySelector("div");
/*
1.注意點:
無論是event對象中的touches/targetTouches/changedTouches都是一個偽數組
所以我們想要獲取手指位置的時候, 需要從偽數組中取出需要獲取的那個手指對象
*/
oDiv.addEventListener("touchstart", function (event) {
// 獲取手指距離屏幕左上角的位置
// console.log(event.targetTouches[0].screenX);
// console.log(event.targetTouches[0].screenY);
// 獲取相對于當前視口的距離
console.log("clientX", event.targetTouches[0].clientX);
console.log("clientY", event.targetTouches[0].clientY);
/*
clientX 10
clientY 8
pageX 1156
pageY 8
*/
// 獲取相對于當前頁面內容的距離
console.log("pageX", event.targetTouches[0].pageX);
console.log("pageY", event.targetTouches[0].pageY);
});簡單案例: 物塊拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08-touch事件練習</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div></div>
<script>
var oDiv = document.querySelector("div");
var startX, startY, moveX, moveY;
// 1.監聽手指按下事件
oDiv.addEventListener("touchstart", function (event) {
// 記錄手指按下的位置
startX = event.targetTouches[0].clientX;
startY = event.targetTouches[0].clientY;
});
// 2.監聽手指一動事件
oDiv.addEventListener("touchmove", function (event) {
// 記錄手指移動之后的位置
moveX = event.targetTouches[0].clientX;
moveY = event.targetTouches[0].clientY;
// 計算兩個位置之間相差的距離, 相差的距離就是需要移動的距離
var offsetX = moveX - startX;
var offsetY = moveY- startY;
// 讓div移動起來
oDiv.style.transform = "translate("+offsetX+"px,"+offsetY+"px)";
});
</script>
</body>
</html>zepto中touch事件的點透問題
如果兩個元素是重疊的(一個在另一個上面), 并且上面一個監聽了touchstart事件, 下面一個監聽了click事件,那么如果上面一個元素觸發touchstart事件之后消失了, 那么就會出現點透問題
解決方案: fastclick框架
注: 框架必須在前面調用, 并且所有的元素都被注冊了fastclick中的事件, 以后所有的click事件都是fastclick的click事件
zepto中的swipe事件
手指在元素上滑動觸發的事件
$("div").swipeLeft(function () {
// console.log("左滑動");
$(this).animate({left: "0px"}, 1000);
});
$("div").swipeRight(function () {
// console.log("右滑動");
$(this).animate({left: "100px"}, 1000);
});
$("div").swipeUp(function () {
// console.log("上滑動");
$(this).animate({top: "0px"}, 1000);
});
$("div").swipeDown(function () {
// console.log("下滑動");
$(this).animate({top: "100px"}, 1000);移動端hover事件
移動端只能使用mouseenter和mouseleave來監聽移入和移出
iscroll框架
當我們做移動端側邊欄的時候, 自己實現可能會出現bug也可能比較麻煩,這時候可以用iscroll框架
github地址: https://github.com/cubiq/iscroll
實現步驟
按照框架的需要搭建一個三層的結構
引入iscroll.js框架
創建一個IScroll對象, 把需要滾動的容器給它
var myScroll = new IScroll('.test', {
mouseWheel: true, // 開啟鼠標滾動滾動
scrollbars: true // 開啟滾動條, 但是容器必須是定位的, 否則滾動條的位置不對
});
// 相關常用的回調函數
myScroll.on("beforeScrollStart", function () {
console.log("手指觸摸, 還沒有開始滾動");
});
myScroll.on("scrollStart", function () {
console.log("開始滾動");
});
myScroll.on("scrollEnd", function () {
console.log("結束滾動");
});swiper框架
Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。
Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！
如何使用:
引入對應的css和js文件
按照框架的需求搭建三層結構
創建一個Swiper對象, 將容器元素傳遞給它,第二個參數接收一個對象
<div>
<ul>
<li>slider1</li>
<li>slider2</li>
<li>slider3</li>
</ul>
</div>
<script>
var mySwiper = new Swiper('.test',{
loop: true,
autoplay: true,
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滾動條
scrollbar: {
el: '.swiper-scrollbar',
},);
</script>以上就是JS Zepto 移動端的 jQuery的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
