標籤：手機瀏覽器 touch chrome javascript jquery
完成效果：
只能在手機上示範效果，電腦上可以用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();
有知道怎麼寫的一定要告訴我啊~~
使用javascript實現手機上的touchmove效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
