使用javascript實現手機上的touchmove效果
阿新 • • 發佈：2019-01-10
完成效果：
只能在手機上演示效果，電腦上可以用chrome瀏覽器開發者工具中的UA來模擬手機。
<pre name="code" class="html"><!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" charset="utf-8"> <title>JS Bin</title> <style> * { padding: 0; margin: 0; } .nav { width: 300px; height: 200px; overflow: hidden; padding: 10px; background: #eee; border: 1px solid #E29E21; position: absolute; margin-top: 100px; left: 50px; } ul { list-style: none; } .head { position: relative; width: 3000px; background: #ccc; left: 0; } .box { position: relative; width: 50px; height: 50px; line-height: 50px; background: green; text-align: center; float: left; margin-left: 10px; border-radius: 4px; } .selected { background: #E29E21 !important; color: #FFFFFF !important; } </style> <script> <span style="color:#ff0000;">$(document).ready(function() { tag_num = $(".head >li").length; nav_widthx = document.body.clientWidth; //獲取可視區域寬度 max_width = (tag_num * 60 - nav_widthx + 100) * -1; //獲取左滑最大距離 //alert(max_width); document.getElementById("head").addEventListener('touchstart', touchStart); document.getElementById("head").addEventListener('touchmove', touchMove); document.getElementById("head").addEventListener('touchend', function() { isMove = false; }); }); //滑動開始事件 function touchStart(e) { isMove = true; e.preventDefault(); tx = parseInt($("#head").css('left')); x = e.touches[0].pageX; } function touchMove(e) { if (isMove) { e.preventDefault(); var n = tx + e.touches[0].pageX - x; if (n <= 0 && n > max_width) { $("#head").css('left', n + 'px'); } } }</span> </script> </head> <body> <div class="nav"> <h1>在手機上實現圖示滑動效果</h1> <ul class="head" id="head"> <li class="box selected">標題一</li> <li class="box">標題二</li> <li class="box">標題三</li> <li class="box">標題4</li> <li class="box">標題5</li> <li class="box">標題6</li> <li class="box">標題7</li> <li class="box">標題8</li> <li class="box">標題9</li> <li class="box">標題10</li> <li class="box">標題11</li> <li class="box">標題12</li> </ul> <br> </div> </body> </html>
參考部落格
背景：手機瀏覽器不支援JQuery的mousedown,mousemove,mouseup事件，想用jquery來寫，但是百度過後發現jquery也沒有支援手機手勢滑動的方法。最終找到了上面的這篇部落格才解決了問題。
<span style="color:#ff0000;">nav_widthx = document.body.clientWidth; //獲取可視區域寬度</span><span style="color: rgb(255, 0, 0); font-family: Arial, Helvetica, sans-serif;">max_width = (tag_num * 60 - nav_widthx + 100) * -1; //獲取左滑最大距離</span>
上述程式碼是為了在滑到最右邊的時候，控制左滑最大距離，不會讓選單消失。
不足之處：
<span style="color:#ff0000;">document.getElementById("head").addEventListener('touchstart', touchStart); document.getElementById("head").addEventListener('touchmove', touchMove); document.getElementById("head").addEventListener('touchend', function() { isMove = false; });</span>
<span style="color:#ff0000;"></span><pre name="code" class="html" style="font-size:18px;"><span style="color:#ff0000;">tx = parseInt($("#head").css('left'));//這個地方也需要改</span>元素繫結事件有些繁瑣，不知道怎樣寫可以讓呼叫的時候儘量簡化。因為頁面中不止這一個要滑動的部分。
最後像這樣呼叫：$(".head").drag();
有知道怎麼寫的一定要告訴我啊~~