使用滑鼠拖拽div,實現橫向滾動
阿新 • • 發佈:2019-02-19
效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body >
<div id="pic" style="width:10000px;height:300px;font-size:100px;">
getY和getX同樣道理,這兩個差值就是滑鼠相對於物件的定位,因為拖拽後滑鼠和拖拽物件的相對位置是不變的
</div>
<script type="text/javascript">
var drag=function(obj){
obj.bind("mousedown",start);
function start(event){
if(event.button==0){//判斷是否點選滑鼠左鍵
gapX=event.clientX;
startx = $(window).scrollLeft(); // scroll的初始位置
//movemove事件必須繫結到$(document)上,滑鼠移動是在整個螢幕上的
$(document).bind("mousemove" ,move);
//此處的$(document)可以改為obj
$(document).bind("mouseup",stop);
}
return false;//阻止預設事件或冒泡
}
function move(event){
var left = event.clientX-gapX; // 滑鼠移動的相對距離
$(window).scrollLeft(startx - left );
return false;//阻止預設事件或冒泡
}
function stop(){
//解繫結,這一步很必要,前面有解釋
$(document).unbind("mousemove",move);
$(document).unbind("mouseup",stop);
}
}
obj=$("#pic");
drag(obj);//傳入的必須是jQuery物件,否則不能呼叫jQuery的自定義函式
</script>
</body>
</html>