色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery 鼠標按下拖動

林雅南1年前8瀏覽0評論

jQuery是一款非常流行的JavaScript庫,它可以方便地幫助我們實現許多交互特效。其中,鼠標按下拖動也是常見的交互效果之一。下面就來介紹一下如何使用jQuery實現鼠標按下拖動。

$(document).ready(function(){
var isMouseDown = false;   //記錄鼠標是否按下的標志
var data = {};   //記錄拖動數據的對象
$(".box").mousedown(function(event){
isMouseDown = true;
data.pageX = event.pageX;   //記錄鼠標按下時的坐標
data.pageY = event.pageY;
data.left = parseInt($(this).css("left"));   //記錄盒子的初始位置
data.top = parseInt($(this).css("top"));
});
$(document).mousemove(function(event){
if(isMouseDown){   //當鼠標按下時才進行拖動
var deltaX = event.pageX - data.pageX;   //計算鼠標位移的距離
var deltaY = event.pageY - data.pageY;
$(".box").css({
left:data.left + deltaX + "px",   //計算并設置盒子的新位置
top:data.top + deltaY + "px"
});
}
});
$(document).mouseup(function(){
isMouseDown = false;   //鼠標松開,標志清零
});
});

上面的代碼實現了一個簡單的拖動效果。它的原理是在鼠標按下時記錄盒子的初始位置和鼠標按下時的坐標,然后在鼠標移動時計算鼠標位移的距離,從而得出盒子的新位置,最后設置盒子的CSS樣式即可。