每天一個JS小demo之移動端橫向滑屏和“橡皮筋”特效

来源:http://www.cnblogs.com/catEatBird/archive/2017/06/29/7096414.html
-Advertisement-
Play Games

<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width,user-scalable=no" /><meta charset="UTF-8"><script type="text/ja ...


<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<script type="text/javascript">
(function(){
setSize();
window.onresize = setSize;
function setSize(){
var html = document.documentElement;
var htmlW = html.clientWidth;
html.style.fontSize = htmlW / 16 + "px";
}
})();
</script>
<title>Document</title>
<style type="text/css">
body {
margin: 0;
background: #ccc;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.navWrap {
position: relative;
border-bottom: 1px solid #000;
background: #f1f1f1;
height: 2.4rem;
overflow: hidden;
}
#navs {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
}
#navs li {
display: inline-block;
font: .8rem/2.4rem "宋體";
padding: 0 1rem;
}
#navs li:nth-of-type(1) {
background: #fff;
}
#navs li:nth-last-of-type(1) {
background: #fff;
}
#navs a {
text-decoration: none;
color: #000;
}
</style>
<script type="text/javascript" src="js/startmove.js"></script>
</head>
<body>
<nav class="navWrap">
<ul id="navs">
<li class="active"><a href="javascript:;" target="_blank">首頁</a></li><li><a href="javascript:;" target="_blank">MV</a></li><li><a href="javascript:;" target="_blank">悅單</a></li><li><a href="javascript:;" target="_blank">V榜</a></li><li><a href="javascript:;" target="_blank">音樂</a></li><li><a href="javascript:;" target="_blank">商城</a></li><li><a href="javascript:;" target="_blank">節目</a></li><li><a href="javascript:;" target="_blank">飯糰</a></li><li><a href="javascript:;" target="_blank">咨詢</a></li><li><a href="javascript:;" target="_blank">商城</a></li><li><a href="javascript:;" target="_blank">節目</a></li><li><a href="javascript:;" target="_blank">飯糰</a></li><li><a href="javascript:;" target="_blank">咨詢</a></li><li><a href="javascript:;" target="_blank">我的家</a></li><li><a href="javascript:;" target="_blank">APP下載</a></li><li><a href="javascript:;" target="_blank">熱門應用</a></li>
</ul>
</nav>
<script type="text/javascript">
document.addEventListener('touchstart', function(e) {
e.preventDefault();
});
(function(){
var navWrap = document.querySelector('.navWrap');
var navs = document.querySelector('#navs');
var start,startEl,lastTime,lastDis,lastSpeed;
var min = 0;
var max = 0;
var TC = .25;//拉力繫數
/*
lastTime 上一次時間
lastDis 上一次位置
lastSpeed 上一次速度
*/
navWrap.addEventListener('touchstart', function(e) {
var touch = e.changedTouches[0];
start = touch.pageX;
startEl = css(navs,"left");
lastTime = Date.now();
lastDis = touch.pageX;
min = navWrap.clientWidth - navs.offsetWidth;
});
navWrap.addEventListener('touchmove', function(e) {
var touch = e.changedTouches[0];
var now = touch.pageX;
var x = now - start + startEl;
var nowTime = Date.now();
if(x > max){
x *= TC;
} else if(x < min) {
// 位移的幅度為什麼沒有減小？
x = (x - min)*TC + min;
}
css(navs,"left",x);
lastSpeed = (touch.pageX - lastDis)/(nowTime - lastTime);
//得到上一次和這一次的滑動速度
lastDis = touch.pageX;
lastTime = nowTime;
});
navWrap.addEventListener('touchend', function(e) {
//console.log(lastSpeed);//最後一次滑動的速度
/* 速越快，緩衝的距離越大 */
if(Date.now() - lastTime > 100){
//如果最後一次的move時間和我抬起的時候，相差比較大，說明我在抬起之前，有一定時間沒有移動過，那鬆手之後，也應該保持不動
lastSpeed = 0;
}
lastSpeed = Math.abs(lastSpeed) < .1?0:lastSpeed;
var translate = lastSpeed * 200;//這是要緩衝出去距離
translate = Math.abs(translate) > 1000?1000*(translate/Math.abs(translate)):translate;
var target = translate + css(navs,"left");
var type = "easeOutStrong";
if(target > max){
target = 0;
type = "backOut";
} else if(target < min){
target = min;
type = "backOut";
}
var time = Math.abs((target -css(navs,"left")) * 1.3);
time = (time>0&&time<200)?200:time;
console.log(time);
startMove({
el:navs,
target: {
left: target
},
time: time,
type: type
});
});
})();
</script>
</body>
</html>

//動畫形式公式
var Tween = {
linear: function (t, b, c, d){
return c*t/d + b;
},
easeIn: function(t, b, c, d){
return c*(t/=d)*t + b;
},
easeOut: function(t, b, c, d){
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(t, b, c, d){
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p/4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasticOut: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasticBoth: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 2.70158; //回縮的距離
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(t, b, c, d){
return c - Tween['bounceOut'](d-t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth: function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}
}
// 獲取或者設置樣式
function css(el,attr,val){
if(arguments.length == 2){
if(el.currentStyle){
val = el.currentStyle[attr];
} else {
val = getComputedStyle(el)[attr];
}
return parseFloat(val);
} else {
if(attr == "opacity"){
el.style.opacity = val;
el.style.filter = "alpha(opacity= "+val*100+")";
} else if(attr == "zIndex"){
el.style[attr] = Math.round(val);
}else {
el.style[attr] = val + "px";
}
}
}
//執行動畫
function startMove(init){
clearInterval(init.el.timer);
var t = 0;
var b = {};
var c = {};
var d = init.time/20;
for( var s in init.target){
b[s] = css(init.el,s);
c[s] = init.target[s] - b[s];
}
init.el.timer = setInterval(function(){
t++;
if(t > d){
clearInterval(init.el.timer);
init.callBack&&init.callBack();
} else {
for(var s in init.target){
var val = Tween[init.type](t,b[s],c[s],d);
css(init.el,s,val);
}
}
},20);
}


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 理解Hibernate事務機制，首先需要搞清楚的6個問題
    問題1：到底該用getTransaction還是beginTransaction？ 上圖說明的問題： 第1步，調用session.getTransaction()的時候，會創建一個全新的Transaction對象； 第2步，調用session.beginTransaction()的時候，會創建一個全 ...
  • 【★求探討★】最簡單的方法----js判斷字元串是否為JSON格式
    前言 針對 “js判斷字元串是否為JSON格式” 這個問題，在網上查了許多資料，都沒找到自己想要的答案。 但是看到這個帖子《js判斷字元串是否為JSON格式》後，突然靈光一閃，想到一種很簡單的解決方案。 如果你對這個方法有異議，歡迎留言探討。 解決方案 分析 就像之前的帖子所說，只是單純的用JSON ...
  • 2017高德地圖API WEB開發（key申請，地圖搭建）簡約教程
    2017高德地圖API WEB開發（key申請，地圖搭建）簡約教程 ...
  • 用vue開發一個app（3，三天的成果）
    前言 一個vue的demo 源碼說明 項目目錄說明 . |-- config // 項目開發環境配置 | |-- index.js // 項目打包部署配置 |-- src // 源碼目錄 | |-- components // 公共組件 | |-- header.vue // 頁面頭部公共組件 | ...
  • nodejs的package.json依賴dependencies中 ^ 和 ~ 的區別
    nodejs的package.json定義了一個模塊，包括其依賴關係的一個簡單的JSON文件，該文件可以包含多個不同的指令來告訴Node包管理器如何處理模塊。 dependencies則表示此模塊依賴的模塊和版本，其中常常可以看到類似 ^1.2.0 或 ~1.2.0 這樣的版本範圍指示。 首先，一個 ...
  • AngularJs學習筆記0——前言
    距離上次寫博客有很長時間了，這段時間中也一直想堅持寫博客，但是遲遲未動，一方面是因為剛換工作並適應新的環境導致工作比較忙碌，一直沒有抽出時間來，其實說白了就是給自己的懶惰找藉口，但是本人在園子里也有一段時間了，也一直堅持關註園子里的大神們的文章，感觸頗多。最近也一直計劃堅持寫博客，並把工作中遇到問題 ...
  • web前端知識小筆記（二）
    1.if條件語句相關 對於 if 語句括弧里的表達式，ECMAScript 會自動調用 Boolean()轉型函數將這個表達式的結果轉換成一個布爾值。如果值為 true，執行後面的一條語句，否則不執行。 2.arguments相關 通過arguments 對象的length屬性，來智能的判斷有多少參 ...
  • jQuery2
    DOM 一個參數 兩個參數 對象 css() 獲取指定樣式屬性值 設置屬性值 設置多個屬性值 attr 獲取指定屬性值 設置屬性值 設置多個屬性值 Prop 獲取指定屬性值 設置屬性值 設置多個屬性值 attr與prop區別 attr用於自定義屬性值 prop自帶屬性 刪除屬性 removeAttr ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類