移動端網頁特效
阿新 • • 發佈：2020-08-20
1.觸屏事件touch
常見的觸屏事件
1.2 觸控事件物件（TouchEvent）
觸控事件物件重點三個常見物件列表
當手指離開螢幕的時候 就沒有了touches 和 targetTouches 列表 但是會有 changedTouches
用的多的是targetTouches
<script type="text/javascript"> div.addEventListener('touchmove',function(e){ //targetTouches[0] 就可以得到正在觸控的dom元素的第一個手指的相關資訊 比如 手指的座標 等console.log(e.targetTouches[0]); }) </script>
1.3 移動端拖動元素
① touchstart、touchmove、touchend 可以實現拖動元素
② 拖動元素需要當前手指的座標值 我們可以使用 targetTouches[0]裡面的pageX 和 pageY
③ 移動端拖動的原理：手指移動中，計算出手指移動的距離。然後用盒子原來的位置 + 手指移動的距離
④ 手指移動的距離： 手指滑動中的位置 - 手指剛開始觸控的位置
拖動元素三步曲：
（1）觸控元素touchstart: 獲取手指初始座標，同時獲得盒子原來的位置
（3）離開手指touchend
注意：手指移動也會觸發滾動螢幕所以這裡要組織預設的螢幕滾動e.preventDefault();
<script type="text/javascript">
var div = document.querySelector('div');
var startX = 0;//獲取手指初始座標
var startY = 0;
var X = 0;//獲得盒子原來位置
var Y = 0;
div.addEventListener(
2.移動端常見特效
檢測過渡完成事件 transitionend
classList屬性
classList屬性是HTML5新增的一個屬性。返回元素的類名。但是IE10以上版本支援。
<div class="one two">
</div>
<button>開關燈</button>
<script type="text/javascript">
var div = document.querySelector('div');
var btn = document.querySelector('button');
//新增類名 是在後面追加類名 不會覆蓋以前的類名 注意前面不需要加小點.
div.classList.add('three');
//刪除類名
div.classList.remove('one');
//切換類
btn.addEventListener('click',function(){
document.body.classList.toggle('bg');
})
</script>
手機焦點圖滾動 案例
<!--焦點圖模組--> <div class="focus"> <ul> <li><img src="upload/focus3.jpg" /></li> <li><img src="upload/focus1.jpg" /></li> <li><img src="upload/focus2.jpg" /></li> <li><img src="upload/focus3.jpg" /></li> <li><img src="upload/focus1.jpg" /></li> </ul> <!--小圓點--> <ol> <li class="current"></li> <li></li> <li></li> </ol> </div>HTML部分
.focus{ position: relative; width: 100%; overflow: hidden; } .focus img{ width: 100%; margin-top: -70px; } .focus ul{ overflow: hidden; width: 500%; margin-left: -100%; } .focus ul li{ float: left; width: 20%; } .focus ol{ position: absolute; bottom: 5px; right: 5px; margin: 0; } .focus ol li{ display: inline-block; width: 5px; height: 5px; background-color: #fff; list-style: none; border-radius: 2px; transition: all .3s } .focus ol li.current{ width: 15px; }css部分
window.addEventListener('load',function(){
//獲取元素
var focus = document.querySelector('.focus');
var ul = focus.children[0];
var ol = focus.children[1];
//獲得focus的寬度
var w = focus.offsetWidth;
//利用定時器自動輪播圖片
var index = 0;
var timer = setInterval(function(){
index++;
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform ='translateX('+ translateX +'px)';
},2000);
//等過渡完成之後，再去判斷 監聽過渡完成的事件 transitionend
ul.addEventListener('transitionend',function(){
//無縫滾動
if(index >= 3){
index = 0;
//去掉過渡效果 這樣讓我們ul快速跳到目標文職
ul.style.transition ='none';
//利用最新的索引號乘寬度 滾動圖片
var translateX = -index*w;
ul.style.transform ='translateX(' + translateX + 'px)';
//如果是負值 倒著走
}else if(index < 0){
index = 2;
ul.style.transition ='none';
//利用最新的索引號乘寬度 滾動圖片
var translateX = -index*w;
ul.style.transform ='translateX('+ translateX +'px)';
}
//3.小圓點跟隨變化
//把ol裡面li帶有current類名的選出來去掉類名 remove
ol.querySelector('.current').classList.remove('current');
//把當前索引號的li加上current add
ol.children[index].classList.add('current');
});
//4.手指滑動輪播圖
//觸控元素 touchstart：獲取手指初始座標
var startX = 0;
var moveX = 0;
var flag = false;
ul.addEventListener('touchstart',function(){
startX = e.targetTouches[0].pageX;
//手指觸控的時候就停止定時器
clearInterval(timer);
});
//移動手指touchmove：計算手指的滑動距離，並且移動盒子
ul.addEventListener('touchmove',function(e){
//計算移動距離
moveX = e.targetTouches[0].pageX;
//移動盒子： 盒子原來位置 + 手指移動距離
var translatex = -index*w +moveX;
//手指拖動的時候，不需要動畫效果 所以要去掉過渡效果
ul.style.transition = 'none';
ul.style.transform = 'translateX('+ translatex +'px)';
flag = true;//如果使用者移動過我們再去判斷 否則不做判斷
e.preventDefault();//阻止滾動螢幕預設行為
});
//手指離開 根據移動距離去判斷是否回彈 還是播放上一張下一張
ul.addEventListener('touchend',function(e){
if(flag){
//(1)如果移動距離大於50畫素 就播放上一張或下一張 取絕對值
if(Math.abs((moveX)>50)){
//如果右滑就是播放上一張 moveX 是正值
if(moveX > 0){
index--;
}else{
//如果左滑就是播放下一張 moveX 是負值
index++;
}
var translateX = -index*w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX('+ translatex +'px)';
}else{
//(2)如果移動距離小於50畫素 就回彈
var translateX = -index*w;
ul.style.transition = 'all .1s';
ul.style.transform = 'translateX('+ translatex +'px)';
}
}
//手指離開的時候就重新開啟定時器
clearInterval(timer);
timer = setInterval(function(){
index++;
var translateX = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform ='translateX('+ translateX +'px)';
},2000);
});
})
JS部分
2.2 click延時解決方案
移動端click事件會有300ms的延時，原因是移動端螢幕雙擊會縮放(double tap to zoom)頁面。
（1）禁用縮放。瀏覽器禁用預設的雙擊縮放行為並且去掉300ms的點選延遲。
<meta name="viewport" content="user-scalable=no" />
（2）利用touch事件自己封裝這個事件解決300ms延遲。
原理：
① 當我們手指觸控式螢幕幕，記錄當前觸控時間
② 當我們手指離開螢幕，用離開的時間減去觸控的時間
③ 如果時間小於150ms，並且沒有滑動過螢幕，那麼我們就定義為點選
（3）使用外掛。fastclick外掛解決300ms延遲。
GitHub 官網地址：https://github.com/ftlabs/fastclick
首頁匯入fastclick JS檔案
if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false);
3.3 Swiper 外掛的使用
中文官網地址： https://www.swiper.com.cn
① 引入外掛相關檔案
② 按照規定語法使用
3.4 其他移動端常見外掛
· superslide：http://www.superslide2.com
· iscoll：http://github.com/cubiq/iscroll