在pc端可以用mousedown來觸發乙個滑塊滑動的效果，但在手機上，貌似無法識別這個事件，但手機上有touchstart事件，可以通過一系列「touch」事件來替代pc端的「mouse」事件。
移動端觸屏滑動的效果其實就是輪播，在pc的頁面上很好實現，繫結click和mouseover等事件來完成。但是在移動裝置上，要實現這種輪播的效果，就需要用到核心的touch事件。處理touch事件能跟蹤到螢幕滑動的每根手指。
以下是四種touch事件
touchstart: //手指放到螢幕上時觸發
touchmove: //手指在螢幕上滑動式觸發
touchend: //手指離開螢幕時觸發
touchcancel: //系統取消touch事件的時候觸發，這個好像比較少用
每個觸控事件被觸發後，會生成乙個event物件，event物件裡額外包括以下三個觸控列表
touches: //當前螢幕上所有手指的列表
targettouches: //當前dom元素上手指的列表，盡量使用這個代替touches
changedtouches: //涉及當前事件的手指的列表，盡量使用這個代替touches
這些列表裡的每次觸控由touch物件組成，touch物件裡包含著觸控資訊，主要屬性如下：
clientx / clienty: //觸控點相對瀏覽器視窗的位置
pagex / pagey: //觸控點相對於頁面的位置
screenx / screeny: //觸控點相對於螢幕的位置
identifier: //touch物件的id
target: //當前的dom元素
相容pc和移動端：
<title>滑鼠拖動小方塊
<styletype="text/css">
.linediv
.linediv .mindiv
.linediv .mindiv .vals
.linediv .mindiv .vals:after
<body>
<center>
<h3>用滑鼠拖動小方塊<spanid="msg">0%
<divid="linediv" class="linediv">
<divid="mindiv" class="mindiv">
<divid="vals" class="vals">0
<script>
window.onload = function()
var move = function(e) else
//var x = e.touches[0].pagex || e.clientx; //滑鼠橫座標var x
var linediv_left = getposition(linediv).left; //長線條的橫座標
var mindiv_left = x - linediv_left; //小方塊相對于父元素（長線條）的left值
if(mindiv_left >= linediv.offsetwidth - 15)
if(mindiv_left <0)
//設定拖動後小方塊的left值
mindiv.style.left = mindiv_left + "px";
msg.innertext = parseint((mindiv_left / (linediv.offsetwidth - 15)) * 100);
vals.innertext = parseint((mindiv_left / (linediv.offsetwidth - 15)) * 100);
}
}
var end = function(e)
//滑鼠按下方塊
mindiv.addeventlistener("touchstart", start);
mindiv.addeventlistener("mousedown", start);
//拖動
window.addeventlistener("touchmove", move);
window.addeventlistener("mousemove", move);
//滑鼠鬆開
window.addeventlistener("touchend", end);
window.addeventlistener("mouseup", end);
//獲取元素的絕對位置
function getposition(node)
return ;
}
}
JavaScript實現拖動滑塊驗證（方法已封裝）
在看了它內部的實現之後，雖然沒完全看懂哈，但是基本功能都看的差不多了。然後就根據它的底層實現，自己學著將之前寫的 進行了封裝，相當於高階版。做法 先根據需求定義好自己要用到的一些方法 其次將所有方法按照邏輯思維都依次羅列出來，先不填充方法體 然後根據需要互相呼叫方法 最後再根據要實現的功能填充之前定...
JS 拖動事件
by zhangxinxu welcome to visit my personal website zxx.drag v1.0 2010 03 23 元素的拖拽實現 var params 獲取相關css屬性 var getcss function o,key 拖拽的實現 var startdrag...
JS實現DIV拖動
可移動可調整大小 預設居中開啟 保留位置上開啟 開啟div 操作說明 選中核取方塊 可移動 可調整大小 後，開啟的div具有移動 調整大小的功能 此時移動 調整大小快捷鍵可使用 反之，不可移動 調整大小 此時移動 調整大小快捷鍵無效 單選框預設居中開啟選中，無論有無儲存div位置和大小均以預設位置及...