由於項目的地圖需要，領導要求做一個控制地圖旋轉的效果，借用了百度地圖的圖片。
點擊兩邊箭頭分別順時針或逆時針 旋轉，點擊下方按鈕回到原來的位置。
原理很簡單，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery地圖旋轉按鈕</title>
<link rel="stylesheet" href="http://www.millionen.wang/javascript/RotateButton/common.css" type="text/css"/>
<script type="text/javascript" src="http://www.millionen.wang/javascript/RotateButton/jquery-1.2.6.pack.js"></script>
</head>
<body>
<div id="map-operate">
<div class="operate">
<div class="button">
<button class="rotLeft" id="rotLeft" title="逆時針轉動"></button>
<img class="rotImg" id="rotImg" src="http://www.millionen.wang/javascript/RotateButton/images/needle.png"/>
<button class="rotRight" id="rotRight" title="順時針轉動"></button>
</div>
<button id="recovery" class="recovery" title="恢復"></button>
</div>
</div>
<script>
$(function() {
var r = 0;
$('#rotLeft').click(function() {
r -= 45;
$('#rotImg').css('transform', 'rotate(' + r + 'deg)');
});
$('#rotRight').click(function() {
r += 45;
$('#rotImg').css('transform', 'rotate(' + r + 'deg)');
});
$('#recovery').click(function() {
r = 0;
$('#rotImg').css('transform', 'rotate(' + r + 'deg)');
});
});
</script>
</body>
</html>