以jQuery完成滑鼠控制地圖平移捲動
顏怡宏 Bob Yen
- 恆逸教育訓練中心-資深講師
- 技術分類：多媒體
常常看到網頁上有許多地圖，只要在地圖上面移動滑鼠，就能夠捲動地圖，而這種效果可以藉由jQuery的強大功能，配合CSS的設定，依照下面的步驟，就能夠輕易完成。
首先只要在<body>區塊中，將要捲動的地圖設定成為<div>標籤的背景圖形，並且加上id屬性，並且指定影像來源，例如設定為：
<body>
<div id="myDiv"></div>
</body>
接著在<style>區塊中設定這個<div>區塊的CSS外觀屬性
<style>
#myDiv{ /*此行指定要捲動影像的區塊*/
width:500px; /*此行設定區塊的寬度*/
height:500px; /*此行設定區塊的高度，需與地圖高度相同*/
background-image:url(images/map.jpg); /*此行設定區塊的背景地圖位置*/
cursor:pointer; /*此行設定區塊的游標形式*/
box-shadow:5px 5px 10px black; /*此行設定區塊的外框陰影*/
}
</style>
然後先引入jQuery.js這個JavaScript檔案來使用，可以由jQuery官方網站下載。
https://jquery.com/download
<script src="jquery.js"></script>
最後於<script>標籤中再加入以下JavaScript程式碼就可以完成了。
<script>
$(document).ready(init);/*執行初始化函式*/
function init(){/*初始化函式*/
$("#myDiv").mousemove(/*滑鼠於區塊內移動時觸發*/
function (e){ /*滑鼠移動處理函式*/
var photoWidth=2500; /*地圖的總寬度*/
var divWidth=500; /*區塊的高度，與CSS中的設定相同*/
var moveRange = photoWidth-divWidth; /*算出地圖可捲動距離*/
var scale = moveRange/divWidth; /*算出滑鼠移動與地圖捲動之比例*/
$("#myDiv").css({backgroundPosition:-e.offsetX*scale+"px"});
/*以jQuery的CSS指令，設定區塊背景捲動的距離*/
}
);
}
</script>
如此就能夠成功的使地圖隨著滑鼠移動而捲動了。
