/*
? ? touchstart 事件
? ? touchmove ?事件
*/
?
const ContBox = $('.div');
/* 用ContBox的總寬度減去當(dāng)前可視化的窗口寬度 等于 可移動(dòng)的left最大值 */
const maxX = ContBox.width() - $('.demo').width();
ContBox.on({
? ? ? ? touchstart:function(e){
? ? ? ? ? ? var e = e || window.event;
? ? ? ? ? ? /* 獲取鼠標(biāo)點(diǎn)擊的位置 */
? ? ? ? ? ? startX = e.originalEvent.targetTouches[0].pageX;
? ? ? ? ? ? /* 獲取當(dāng)前元素的偏移 */
? ? ? ? ? ? sX=$(this).offset().left; /* 沒(méi)有用到 */
? ? ? ? },
? ? ? ? touchmove:function(e){
? ? ? ? ? ? var e = e || window.event;
? ? ? ? ? ? e.preventDefault();
? ? ? ? ? ? /* 移動(dòng)的同時(shí)不斷的獲取新的鼠標(biāo)位置 */
? ? ? ? ? ? moveX=e.originalEvent.targetTouches[0].pageX;
? ? ? ? ? ? /* 新的位置 減去 最開(kāi)始的位置 等于 要移動(dòng)的值 */
? ? ? ? ? ? var frameX = moveX - startX;
? ? ? ? ? ? /* 獲取原有的 left 偏移量 + 要移動(dòng)的值 等于 最終移動(dòng)的值 */
? ? ? ? ? ? var moveLeft = parseInt(ContBox.css("left")) + frameX;
? ? ? ? ? ? if(moveLeft<=-maxX){
? ? ? ? ? ? ? ? moveLeft = -maxX
? ? ? ? ? ? }
? ? ? ? ? ? if(moveLeft >= 0){
? ? ? ? ? ? ? ? moveLeft = 0
? ? ? ? ? ? }
? ? ? ? ? ? ContBox.css({left:moveLeft});
? ? ? ? ? ? TitleBox.css({left:moveLeft});
? ? ? ? ? ? /* 鼠標(biāo)按下后 一直處于拖動(dòng)狀態(tài)的時(shí)候 把 新的 鼠標(biāo)位置 賦值給 startX ?*/
? ? ? ? ? ? /* 然后再次執(zhí)行回來(lái) 依舊等于 滑動(dòng)的新位置 減去 startX ?而不是 拖拽的時(shí)候 startX 一直處于 默認(rèn)的初始位置 */
? ? ? ? ? ? startX = moveX;
? ? ? ? },
})