2020年史上最全移動端Web整理從開發基礎到實戰(二)
1、Zepto簡介
Zepto是一個輕量級的針對現代高級瀏覽器的 JavaScript庫， 它與jquery有着相似的api。javascript
Zepto 主要使用在移動端瀏覽器上面，因爲移動端的瀏覽器都是比較新的平臺，而 jQuery 主要是在 PC 上爲了瀏覽器的兼容性而使用的，因此在移動端通常不使用 jQuery，由於它的兼容性失去了意義。css
Zepto 就是移動端代替 jQuery 的 js 庫，它封裝了不少關於手勢操做的方法。若是你會用jquery，那麼你也會用zepto。html
Zepto js 庫文件的下載地址：github.com/madrobby/ze… js 文件就在 src 目錄下。java
2、手勢事件封裝
Zepto 將移動端的 touchStart，touchmove 和 touchEnd 封裝成了一系列事件。jquery
tap ：觸摸屏幕時觸發。ios
singleTap ：單擊屏幕時觸發git
doubleTap：雙擊屏幕時觸發。(若是你不須要檢測單擊、雙擊，使用 tap 代替)。github
longTap ：長按時觸發。當一個元素被按住超過750ms觸發。web
swipe：滑動屏幕時觸發。ajax
swipeLeft, swipeRight, swipeUp, swipeDown：屏幕左滑，右滑，上滑，下滑時觸發。
3、Zepto 模塊化
Zepto 有一點和 jQuery 是不一樣的，就是 Zepto 是分模塊的。在使用的時候不是像 jQuery 只須要引入一個 js 文件就能夠了。Zepto 是分模塊的。
默認的 Zepto.js 文件只包含下面一些功能：
| zepto | ✔ | 核心模塊；包含許多方法 |
|---|---|---|
| event | ✔ | 經過on()& off()處理事件 |
| ajax | ✔ | XMLHttpRequest 和 JSONP 實用功能 |
| form | ✔ | 序列化 & 提交web表單 |
| ie | ✔ | 增長支持桌面的Internet Explorer 10+和Windows Phone 8。 |
若是要使用到其餘的功能，就須要包含其餘的 js 文件：
| detect.js | 提供 $.os和 $.browser消息 |
|---|---|
| fx.js | The animate()方法 |
| fx_methods.js | 以動畫形式的 show, hide, toggle, 和 fade*()方法. |
| assets.js | 實驗性支持從DOM中移除image元素後清理iOS的內存。 |
| data.js | 一個全面的 data()方法, 可以在內存中存儲任意對象。 |
| deferred.js | 提供 $.Deferredpromises API. 依賴"callbacks" 模塊. 當包含這個模塊時候, $.ajax() 支持promise接口鏈式的回調。 |
| callbacks.js | 爲"deferred"模塊提供 $.Callbacks。 |
| selector.js | 實驗性的支持 jQuery CSS 表達式 實用功能，好比 $('div:first')和el.is(':visible')。 |
| touch.js | 在觸摸設備上觸發tap– 和 swipe– 相關事件。這適用於全部的touch(iOS, Android)和pointer事件(Windows Phone)。 |
| gesture.js | 在觸摸設備上觸發 pinch 手勢事件。 |
| stack.js | 提供 andSelf& end()鏈式調用方法 |
| ios3.js | String.prototype.trim 和 Array.prototype.reduce 方法 (若是他們不存在) ，以兼容 iOS 3.x. |
因此，每次在使用到某一個功能的時候，就須要到 html 文件下添加相應的 js 庫文件，這樣就比較繁瑣，更重要的是多個 js 文件會增長訪問服務器的次數，那麼咱們可不能夠像 jQuery 同樣，只包含一個 js 庫文件就包括全部的功能呢？
答案是確定的。
4、Zepto 的定製
Zepto 容許將多個 js 文件打包成一個 js 文件。
操做步驟：
一、安裝 Nodejs 環境
二、下載 zepto.js 源碼並解壓好。
三、cmd 命令行進入解壓縮後的目錄
四、執行npm install 命令（這一步須要聯網下載）
五、編輯 zepto.js 源碼中的 make文件，添加自定義模塊並保存，以下
原來的：modules = (env['MODULES'] || 'zepto event ajax form ie').split(' ')
增長本身須要的模塊：modules = (env['MODULES'] || 'zepto event ajax form ie fx selector touch').split(' ')
六、而後執行命令 npm run-script dist（這一步會在當前目錄生成一個dist文件夾） 七、查看目錄 dist ，裏面就有咱們打包好的 zepto.js 庫文件。
5、使用 zepto 實現京東移動首頁
相關源碼已放置 Github
如下爲詳細代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
<!-- <script src="./js/index.js"></script> -->
<script src="./zepto-master/src/zepto.min.js"></script>
<script src="./zepto-master/src/fx.js"></script>
<script src="./zepto-master/src/selector.js"></script>
<script src="./zepto-master/src/touch.js"></script>
<script src="./js/index-zepto.js"></script>
</head>
<body>
<div class="jd">
<!-- 搜索欄開始 -->
<div class="search">
<a href="javascript:;" class="search-logo"></a>
<form action="" class="search-text">
<input type="text" placeholder="請輸入商品名稱">
</form>
<a href="javascript:;" class="search-login">登陸</a>
</div>
<!-- 搜索欄結束 -->
<!-- 輪播圖開始 -->
<div class="slideshow">
<ul class="slideshow-img clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/l1.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/l2.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/l3.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/l4.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/l5.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/l6.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/l7.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/l8.jpg" alt="">
</a>
</li>
</ul>
<ul class="slideshow-dot">
<li class="select"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 輪播圖結束 -->
<!-- 導航欄開始 -->
<div class="nav">
<ul class="nav-ul clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/nav0.png">
</a>
<p>商品分類</p>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nav1.png">
</a>
<p>商品分類</p>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nav2.png">
</a>
<p>商品分類</p>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nav3.png">
</a>
<p>商品分類</p>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nav4.png">
</a>
<p>商品分類</p>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nav5.png">
</a>
<p>商品分類</p>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nav6.png">
</a>
<p>商品分類</p>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nav7.png">
</a>
<p>商品分類</p>
</li>
</ul>
</div>
<!-- 導航欄結束 -->
<!-- 主體內容開始 -->
<div class="content">
<div class="content-box clearfix content-box-sk">
<div class="content-title">
<span class="content-title-left-clock"></span>
<span class="content-title-left-text fl">掌上秒殺</span>
<div class="content-title-left-time fl">
<span>0</span>
<span>0</span>
<span>:</span>
<span>0</span>
<span>0</span>
<span>:</span>
<span>0</span>
<span>0</span>
</div>
<span class="content-title-right fr">更多秒殺...</span>
</div>
<lu class="content-ul clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/detail01.jpg" alt="" class="br">
</a>
<p>￥10.00</p>
<p class="content-ul-delete">￥20.00</p>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/detail01.jpg" alt="" class="br">
</a>
<p>￥10.00</p>
<p class="content-ul-delete">￥20.00</p>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/detail01.jpg" alt="">
</a>
<p>￥10.00</p>
<p class="content-ul-delete">￥20.00</p>
</li>
</lu>
</div>
<div class="content-box clearfix">
<div class="content-title">
<h3>京東超市</h3>
</div>
<lu class="content-ul">
<li class="fl">
<a href="javascript:;">
<img src="./uploads/cp1.jpg" alt="">
</a>
</li>
<li class="fl bl bb">
<a href="javascript:;">
<img src="./uploads/cp2.jpg" alt="">
</a>
</li>
<li class="fl bl">
<a href="javascript:;">
<img src="./uploads/cp3.jpg" alt="">
</a>
</li>
</lu>
</div>
<div class="content-box clearfix">
<div class="content-title">
<h3>京東超市</h3>
</div>
<lu class="content-ul">
<li class="fr">
<a href="javascript:;">
<img src="./uploads/cp4.jpg" alt="">
</a>
</li>
<li class="fl bl bb">
<a href="javascript:;">
<img src="./uploads/cp5.jpg" alt="">
</a>
</li>
<li class="fl bl">
<a href="javascript:;">
<img src="./uploads/cp6.jpg" alt="">
</a>
</li>
</lu>
</div>
</div>
<!-- 主體內容結束 -->
</div>
</body>
</html>
複製代碼
js 文件：
$(function () {
// 1.在開始和最後位置添加圖片
// 2.從新設置圖片盒子的寬度和圖片的寬度
// 3.添加定時器，自動輪播
// 4.添加過渡結束事件
// 5.設置小白點
// 6.添加手動輪播
// 獲取元素
var ulObj = $(".slideshow-img");
var first = ulObj.find("li:first-of-type");
var last = ulObj.find("li:last-of-type");
var bannerWidth = $(".slideshow").width();
// 在開始和最後位置添加圖片
ulObj.append(first.clone());
last.clone().insertBefore(first);
// 從新設置圖片盒子的寬度和圖片的寬度
var liObjs = ulObj.find("li");
ulObj.width(liObjs.length +"00%");
liObjs.each(function (index) {
// 數組是DOM操做，要轉換成zepto元素
$(liObjs[index]).width(bannerWidth);
});
// 設置默認顯示第一張圖
ulObj.css("transform", "translateX("+ -bannerWidth +"px)");
var index = 1;
// 盒子改變大小的時候重現設置圖片盒子的寬度和圖片的寬度
$(window).on("resize", function () {
ulObj.width(liObjs.length +"00%");
liObjs.each(function (index) {
// 數組是DOM操做，要轉換成zepto元素
$(liObjs[index]).width($(".slideshow").width());
});
ulObj.css("transform", "translateX("+ -$(".slideshow").width()*index +"px)");
});
// 輪播動畫函數
var setAnimate = function () {
ulObj.animate(
{"transform": "translateX("+ -$(".slideshow").width()*index +"px)"},
500,
"linear",
function () { // 過渡結束事件回調函數
if(index == 0) {
index = liObjs.length -2;
ulObj.css("transform", "translateX("+ -$(".slideshow").width()*index +"px)");
} else if(index == liObjs.length -1) {
index = 1;
ulObj.css("transform", "translateX("+ -$(".slideshow").width()*index +"px)");
}
// 設置小白點
$(".slideshow-dot").children("li").removeClass("select").eq(index-1).addClass("select");
}
);
};
var timerId;
// 添加定時器，自動輪播
var timerStart = function () {
timerId = setInterval(function () {
index++;
setAnimate();
}, 1500);
};
timerStart();
// 手動輪播操做
ulObj.on("swipeLeft", function () {
clearInterval(timerId);
index++;
setAnimate();
//手動輪播操做完成後再開啓定時器
timerStart();
});
ulObj.on("swipeRight", function () {
clearInterval(timerId);
index--;
setAnimate();
// 手動輪播操做完成後再開啓定時器
timerStart();
});
//------------------------------------------------
// 搜索欄上下滾動時改變透明度
var bannerEffect = function () {
var bannerObj = $(".search");
var slideshowObj = $(".slideshow");
var bannerHeight = bannerObj.height();
var imgHeight = slideshowObj.height();
// console.log(bannerHeight + ' ' + imgHeight);
$(window).on("scroll", function (e) {
var scrollHeight = $(window).scrollTop();
if(scrollHeight < (imgHeight-bannerHeight)) {
var setopacity = scrollHeight / (imgHeight-bannerHeight);
bannerObj.css("backgroundColor", "rgba(233, 35, 34,"+setopacity+")");
}
});
};
bannerEffect();
//-----------------------------------------------------
// 設置倒計時
var timerCount = function () {
var timers = $(".content-title-left-time").children("span");
var titleCount = 2*60*60;
var timerId = setInterval(function () {
titleCount--;
var hour = Math.floor(titleCount / 3600);
var minute = Math.floor((titleCount % 3600) / 60);
var second = titleCount % 60;
if(titleCount >= 0) {
$(timers[0]).html(Math.floor(hour / 10));
$(timers[1]).html(hour % 10);
$(timers[3]).html(Math.floor(minute / 10));
$(timers[4]).html(minute % 10);
$(timers[6]).html(Math.floor(second / 10));
$(timers[7]).html(second % 10);
} else {
titleCount = 0;
clearInterval(timerId);
return;
}
}, 1000);
};
timerCount();
});
複製代碼
6、實現JD分類頁面
咱們先看看要實現的效果圖：
一、項目需求：
- 全屏頁面
- 右側的頁面隨着頁面寬度的變化而變化，左側欄寬度固定不變。
- 左側欄能夠上下滑動，若是滑動超出上下範圍自動反彈回去
- 點擊左側欄每一個項目，自動滾動左側欄使得項目置頂
- 當點擊項目可能使得超出滑動範圍的時候，以滑動範圍爲準，當前點擊的項目沒必要置頂。
二、項目分析
如何實現一個全屏頁面，沒有滾動條？
以下面的結構：大盒子1和大盒子2分爲上下結構，小盒子3和小盒子4在大盒子2的內部，分爲左右結構。
那麼如何排布，使得上下左右都沒有滾動條呢？
思路：
一、要使得大盒子1和大盒子2上下沒有滾動條，可使得大盒子1 的寬度爲 100%，高度加入100px，大盒子2的高度 100%；這時會超出100px的高度，若是這時咱們讓大盒子1定位（position:absolute;），，確實能夠實現上下沒有滾動條，可是大盒子的頭部100px 的位置會被覆蓋，因此再讓大盒子2 padding-top: 100px; 就能夠了。
二、要使得小盒子3和小盒子4左右沒有滾動條，可不能夠參考大盒子1和大盒子2的策略呢？讓小盒子3 寬度100px，高度100%，小盒子4寬度100%，高度100%，而後小盒子3定位（position:absolute;），這是不能夠的，由於小盒子3的高度是100%，參照父盒子（大盒子2）的，因此高度是整個視口的高度，而大盒子1佔了位置，因此小盒子3只能往下挪，在底部衝出100px的大小，沒法彌補。
那麼怎麼辦呢？
第一，能夠將小盒子3定位（position:absolute;）改成浮動（float:left）；
第二，能夠取消大盒子2的寬度100%，改成 margin-left:100px；小盒子3依然浮動（float:left），也是能夠的。
第三，BFC區域不與浮動區域重疊，而將一個區域變成BFC區域可使用overflow:hidden;
BFC主要三個特色：
- BFC區域不會與float區域重疊（對應兩欄佈局）
- BFC容器中的子元素，不會影響到外邊。（對應子元素margin-top會傳遞到父元素，清除方法可使用overflow:hidden，position:absolute/flex; display:inline-block/flex/table-cell;）
- 計算BFC的高度時，浮動元素也參與計算（對應清除浮動的三個方法，都是讓父元素成爲BFC區域）
三、示例代碼：
相關源碼以放置 Github：github.com/Daotin/Web/…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/category.css">
<script src="./js/category.js"></script>
<script src="./js/tap.js"></script>
<title>Document</title>
</head>
<body>
<div class="layout">
<!-- 頭部header -->
<div class="header">
<div class="header-back"></div>
<form action="" class="header-text">
<input type="text" placeholder="請輸入商品名稱">
</form>
<div class="header-menu"></div>
</div>
<!-- 主體main -->
<div class="main">
<div class="main-left">
<span>拉這麼多想幹嗎？</span>
<ul>
<li class=""><a href="javascript:;">熱門推薦</a></li>
<li class="active"><a href="javascript:;">潮流女裝</a></li>
<li class=""><a href="javascript:;">品牌男裝</a></li>
<li class=""><a href="javascript:;">內衣配飾</a></li>
<li class=""><a href="javascript:;">家用電器</a></li>
<li class=""><a href="javascript:;">電腦辦公</a></li>
<li class=""><a href="javascript:;">手機數碼</a></li>
<li class=""><a href="javascript:;">母嬰頻道</a></li>
<li class=""><a href="javascript:;">圖書</a></li>
<li class=""><a href="javascript:;">家居家紡</a></li>
<li class=""><a href="javascript:;">居家生活</a></li>
<li class=""><a href="javascript:;">傢俱建材</a></li>
<li class=""><a href="javascript:;">熱門推薦</a></li>
<li class=""><a href="javascript:;">潮流女裝</a></li>
<li class=""><a href="javascript:;">品牌男裝</a></li>
<li class=""><a href="javascript:;">內衣配飾</a></li>
<li class=""><a href="javascript:;">家用電器</a></li>
<li class=""><a href="javascript:;">電腦辦公</a></li>
<li class=""><a href="javascript:;">手機數碼</a></li>
<li class=""><a href="javascript:;">母嬰頻道</a></li>
<li class=""><a href="javascript:;">圖書</a></li>
<li class=""><a href="javascript:;">家居家紡</a></li>
<li class=""><a href="javascript:;">居家生活</a></li>
<li class=""><a href="javascript:;">傢俱建材</a></li>
</ul>
</div>
<div class="main-right">
<a href="javascript:;" class="main-right-img">
<img src="./uploads/banner_1.jpg" alt="">
</a>
<h3>商品分類</h3>
<div class="main-right-cate">
<ul>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="./uploads/nv-fy.jpg" alt="">
<p>毛衣</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
複製代碼
CSS 代碼：
html, body {
width: 100%;
height: 100%;
}
.layout {
width: 100%;
height: 100%;
}
/* 頭部header */
.header {
width: 100%;
height: 50px;
background-color: #eee;
border-bottom: 1px solid #ccc;
position: absolute;
}
.header-back,
.header-menu {
width: 50px;
height: 50px;
background: url("../images/jd-sprites.png");
background-size: 200px 200px;
position: absolute;
top: 0;
padding: 15px;
background-origin: content-box;
background-clip: content-box;
}
.header-back {
background-position: -20px 0;
left: 0;
}
.header-menu {
background-position: -60px 0;
right: 0;
}
.header-text {
padding: 0 60px;
}
.header-text > input {
width: 100%;
height: 30px;
margin-top: 10px;
border-radius: 10px;
padding-left: 10px;
font-size: 16px;
color: #aaa;
}
/* 主體main */
.main {
width: 100%;
height: 100%;
padding-top: 50px;
}
.main-left {
width: 100px;
height: 100%;
float: left;
overflow: hidden;
position: relative;
background: #eee;
}
.main-left > span {
display: inline-block;
width: 100%;
font-size: 10px;
color: #ccc;
text-align: center;
margin-top: 80px;
}
.main-left ul {
width: 100px;
position: absolute;
left: 0;
top: 0;
}
.main-left ul li {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-color: #eee;
}
.main-left li.active {
background-color: #fff;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.main-left li.active a {
color: #e92322;
}
.main-left a {
display: block;
width: 100%;
height: 50px;
color: #666;
}
.main-right {
/* width: 100%; */
height: 100%;
margin-left: 100px;
/* 設置爲伸縮盒子 */
display: flex;
flex-direction: column;
}
.main-right-img {
width: 100%;
}
.main-right-img > img {
width: 100%;
/* 消除基線 */
display: block;
}
.main-right > h3 {
font-size: 14px;
font-weight: bold;
color: #333;
margin: 10px 0 10px 5px;
}
.main-right-cate {
width: 100%;
/* 下面兩個一塊兒使得沒有上下滾動條 */
flex: 1;
overflow: hidden;
}
.main-right-cate> ul {
width: 100%;
}
.main-right-cate > ul > li {
width: 33.33%;
text-align: center;
float: left;
}
複製代碼
原生 js 代碼：
window.onload = function () {
leftSlideEffect();
};
// 左側滑動欄效果和點擊效果
function leftSlideEffect() {
// 添加左側欄的滑動效果
var mainObj = document.querySelector(".main");
var leftUlObj = document.querySelector(".main-left").children[1];
var mainLeftHeight = document.querySelector(".main-left").offsetHeight;
var leftUlObjHeight = leftUlObj.offsetHeight;
var liObjs = leftUlObj.querySelectorAll("li");
var startY=0; // 起始位置
var diffY=0; // 滑動後與起始位置的偏移
var currentY=0; // 保存每次滑動後的偏移
var maxTop = 0; // 最大top偏移值
var minTop = mainLeftHeight-leftUlObjHeight; // 最大top偏移值
var maxBounceTop = maxTop + 100; //彈性最大高度
var minBounceTop = minTop - 100; //彈性最小高度
leftUlObj.addEventListener("touchstart", function(e) {
// 計算起始座標
startY = e.targetTouches[0].clientY;
});
leftUlObj.addEventListener("touchmove", function(e) {
/*計算距離的差別*/
diffY = e.targetTouches[0].clientY - startY;
/*判斷滑動的時候是否超出當前指定的滑動區間*/
if((diffY+currentY > maxBounceTop) || (diffY+currentY < minBounceTop)) {
return;
}
/*先將以前可能添加的過渡效果清除*/
leftUlObj.style.transition = "none";
/*實現偏移操做:應該在以前的滑動距離的基礎之上再進行滑動*/
leftUlObj.style.top = diffY+currentY + "px";
});
leftUlObj.addEventListener("touchend", function() {
if(diffY+currentY > maxTop) {
// 回到maxTop位置，設置currentY當前值
leftUlObj.style.transition = "top 0.5s"
leftUlObj.style.top = maxTop + "px";
currentY = maxTop;
} else if(diffY+currentY < minTop) {
// 回到minTop位置，設置currentY當前值
leftUlObj.style.transition = "top 0.5s"
leftUlObj.style.top = minTop + "px";
currentY = minTop;
} else {
// 記錄當前滑動的距離
currentY += diffY;
}
});
// -----------------------------------------------------
// 左側滑動欄點擊效果
/*爲每個li元素設置添加一個索引值*/
for(var i=0; i<liObjs.length; i++) {
// liObjs是對象，給對象增長屬性值
liObjs[i].index = i;
}
// 點擊事件
fingerTap.tap(leftUlObj, function (e) {
// 清除全部li標籤
for(var i=0; i<liObjs.length; i++) {
liObjs[i].classList.remove("active");
}
//設置點擊的li標籤的樣式
var indexLi = e.target.parentElement;
indexLi.classList.add("active");
// 每一個li標籤的高度
var indexLiHeight = indexLi.offsetHeight;
/*2.移動當前的li元素到父容器的最頂部，可是不能超出以前設定了靜止狀態下的最小top值*/
leftUlObj.style.transition = "top 0.5s";
if(-indexLiHeight*indexLi.index < minTop) {
leftUlObj.style.top = minTop + "px";
// 記得重置currentY的值
currentY=minTop;
} else {
leftUlObj.style.top = -indexLiHeight*indexLi.index + "px";
// 記得重置currentY的值
currentY=-indexLiHeight*indexLi.index;
}
});
}
複製代碼
把點擊事件封裝成一個單獨 js 庫，tap.js。
// 封裝移動端的tap事件
var fingerTap = {
tap: function (dom, callback) {
// 判斷dom是否存在
if((!dom) || (typeof dom != "object")) {
return;
}
var startX, startY, endX, endY, startTime, endTime;
dom.addEventListener("touchstart", function (e) {
// 不止一個手指
if(e.targetTouches.length > 1) {
return;
}
startX = e.targetTouches[0].clientX;
startY = e.targetTouches[0].clientY;
// 點擊時記錄毫秒數
startTime = Date.now();
});
dom.addEventListener("touchend", function (e) {
// 不止一個手指
if(e.changedTouches.length > 1) {
return;
}
// 之因此使用changedTouches，是由於手指離開後就沒有targetTouches了
endX = e.changedTouches[0].clientX;
endY = e.changedTouches[0].clientY;
// 記錄離開手指的毫秒數
endTime = Date.now();
//若是是長按操做就返回
if(endTime - startTime > 300) {
return;
}
// 判斷從按下到擡起手指在必定的範圍滑動也算tap事件
if((Math.abs(endX-startX) <= 6) && (Math.abs(endY-startY) <= 6)) {
// tap點擊事件的處理函數
callback && callback(e);
}
});
}
};
複製代碼
四、使用 Zepto 實現點擊操做
上面 tap.js 是咱們本身封裝的點擊事件，其實在 Zepto 中，已經封裝好了 tap 單擊事件，咱們能夠直接使用。
只須要將
fingerTap.tap(leftUlObj, function (e) {});
複製代碼
改成：
$(leftUlObj).on("tap", function() {});
複製代碼
就能夠實現相同的效果。
最後
還有2件事拜託你們
一：求贊 求收藏 求分享 求留言，讓更多的人看到這篇內容
二：歡迎添加個人我的微信
備註「資料」， 300多篇原創技術文章，海量的視頻資料便可得到
備註「加羣」，我會拉你進技術交流羣，羣裏大牛學霸具在，哪怕您作個潛水魚也會學到不少東西
相關文章
- 1. 2020年史上最全移動端Web整理從開發基礎到實戰(一)
- 2. 2020年史上最全移動端Web整理從開發基礎到實戰(三)
- 3. 2020年史上最全Vue框架整理從基礎到實戰(二)
- 4. 2020年史上最全Vue框架整理從基礎到實戰(四)
- 5. 2020年史上最全Vue框架整理從基礎到實戰(一)
- 6. 2020年史上最全Vue框架整理從基礎到實戰(三)
- 7. 2019年末史上最全Vue框架整理從基礎到實戰(二)
- 8. 2019年末史上最全Vue框架整理從基礎到實戰(一)
- 9. 移動端web開發整理
- 10. 移動端Web開發基礎概念
- 更多相關文章...
- • Hibernate整合EHCache實現二級緩存 - Hibernate教程
- • Kotlin 基礎語法 - Kotlin 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • PHP開發工具
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？
歡迎關注本站公眾號,獲取更多信息
