（-1）寫在前面
這個idea不是我的，首先向這位前輩致敬。
我用的是chrome49， jquery3.0。
完整的程序案例在我的百度雲盤http://pan.baidu.com/s/1jI2QSnW
最近大四實習，該走的都走了，過兩天也要去北京找一個web前段的實習機會，世界這么大，我不得不去看看…。
（0）知識儲備
a. webkitTransitionEnd
webkit是瀏覽器前綴，webkitTransitionEnd在過渡完成后觸發。類似DOM對象.click的方式注冊事件，對於webkitTransitionEnd事件是無效的。
b. transform:scale(0.8)
已元素中心為准縮放元素，被元素包裹的內容也跟着縮放，元素實際大小沒有發生化，（已計算后的屬性值為准），注意jquery3.0的width()、height()方法會取得縮放后的尺寸!。對元素margin、top、left不跟着元素的縮放而縮放。該屬性不會繼承。
c. #arrow:active
活動是一種持續的行為，已一個div元素為例，當你一直按着鼠標左鍵或有鍵不放，就會匹配改選擇器。
d. transform:rotate(45deg)
默認以元素中心為軸心轉動元素，如圖所示:
transform:rotate(45deg)執行完畢后，在0度位置的信息在45度位置，轉動是整體的，注意0度和45度這個組合，可以圍繞圓心瞬時針轉動到任意位置，在這個案例中，我們關心的是元素轉動的度數和指針指向區域的關系。
（1）效果圖
（2）具體代碼
a. html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<script type="text/javascript" src="debug-jquery-3.0.0.js"></script>
<script type="text/javascript" src="base.js"></script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>為了生活</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
position:absolute;
}
#active
{
width:640px;
height:640px;
position:absolute;
transform:scale(0.8);
}
#dial
{
width:640px;
height:640px;
position:absolute;
}
#arrow
{
width:240px;
height:252px;
overflow:hidden;
position:absolute;
}
#arrow:active
{
/*鼠標右鍵按在#arrow上時,元素縮小*/
transform:scale(0.95);
}
</style>
</head
<body>
<div id="active">
<div id="dial"><img src="images\lanren.png" width="640" height="640"/></div>
<div id="arrow"><img src="images\arrow.png" width="750" height="252"/></div>
</div>
</body>
</html>
base.js
$(function()
{
var $arrow = $("#arrow"),
$active = $("#active"),
$dial = $("#dial"),
rounds = 5*360; //基礎圈數
$arrow.centerPos();//使元素水平垂直居中、centerPos是自定義函數
$active.centerPos();
window.onresize = function()
{
$arrow.centerPos();
$active.centerPos();
}
$arrow.click(function()
{
if($arrow.data("ding")) return;//如果#arrow正在轉動，不向下執行
$arrow.data("ding", true);//true表示轉動，false表示已停止
var deg = $.random(0,360);//產生一個>=0&&<=360的數
$arrow.data("deg",deg);
$dial.css({
transform:"rotate("+(rounds+deg)+"deg)",
transition:"3s",
});
})
$dial.on("webkitTransitionEnd",function()
{
//旋轉結束執行
$arrow.data("ding",false);
$dial.css({
transition:"none",//不指定none的話等同於transition:"3s"
transform:"rotate("+$arrow.data("deg")+"deg)",
/*
這么做會從deg(上次)轉到5*360+deg(本次)
如果不這么左第一次轉動之后,再次轉動會5*360+deg(上次)轉到5*360+deg(本次)
*/
});
var award = getAward();
alert(award);
})
function getAward()
{
var deg = $arrow.data("deg")
/*
有指針的哪個圖片初始方向相對於圓盤往右偏了2度...
*/
if ((deg >= 332 && deg <= 360) || (deg > 0 && deg < 32))
{
return "三網通流量 10M";
}
else if ((deg >= 32 && deg < 92))
{
return "話費20元";
}
else if (deg >= 92 && deg < 152)
{
return "ipad mini4";
}
else if (deg >= 152 && deg < 212)
{
return "話費5元";
}
else if (deg >= 210 && deg < 272)
{
return "三網通流量 30M";
}
else if (deg >= 272 && deg < 332)
{
return "iPhone7";
}
}
});
$.random = function(min,max,filter)
{
var i,
n = Math.floor(Math.random()*(max-min+1)+min);
if(filter != undefined && filter.constructor == Array)
{
for(i=filter.length-1;i>-1;i--)
{
if(n == filter[i])
{
n = Math.floor(Math.random()*(max-min+1)+min)
i = filter.length;
}
}
}
return n;
}
//top、left根據父元素的寬和高計算
$.fn.centerPos = function()
{
var parent;
this.each(function(index)
{
parent = this.parentNode;
if(parent == document.body)
{
parent = window;
}
var position = $(this).css("position");
if(position == "fixed" || position=="absolute")
{
$(this).css("left",parent != window ?(parent.offsetWidth-this.offsetWidth)/2:(parent.innerWidth-this.offsetWidth)/2);
$(this).css("top",parent != window ?(parent.offsetHeight-this.offsetHeight)/2:(parent.innerHeight-this.offsetHeight)/2);
}
else
{
window.console.error("沒有設置有效的position值");
}
})
return this;
}
function next(current)
{
var parent = current.parentNode,
children = parent.children,
//childNodes、nextSibling maybe contain ObjectText
length = children.length;
for(var i=0;i<length;i++)
{
if(current == children[i])
break;
}
//if not lastChild
if(i<length-1)
{
return children[i+1];
}
else
{
//recursion search until parent == document.body
if(parent != document.body)
{
return next(parent);
}
else
{
window.console.warn("Can not get next sibling");
}
}
}
function getRandomInteger(min,max)
{
return Math.floor(Math.random()*(max-min+1))+min
}
function imitateMouseEvent(element,type)
{
var event = document.createEvent("Events");
event.initEvent(type,true,true);
element.dispatchEvent(event);
}
showMessage.i = 0;
function showMessage(object)
{
var body = $("body")[0];
var $p =$("#debugp");
if($p.length==0)
{
$p = $("<p/>").attr("id","debugp");
$(body).prepend($p);
}
$p[0].innerHTML += "<br/>"+(showAttribute.i++)+" | "+object;
}
showAttribute.i=0;
function showAttribute(object,filter)
{
var body = $("body")[0];
var $p =$("#debugp");
if($p.length==0)
{
$p = $("<p/>").attr("id","debugp");
$(body).prepend($p);
}
if(getType(filter).indexOf(DataType.string)!=-1)
{
for(var a in object)
{
if(a.indexOf(filter)!=-1)
{
$p[0].innerHTML += a+" "+object[a]+"<br/>";
}
}
}
else if(getType(filter) == DataType.RegExp)
{
for(var a in object)
{
if(filter.test(a))
{
$p[0].innerHTML += a+" "+object[a]+"<br/>";
}
}
}
else if(getType(filter) == DataType.UNDEFINED)
{
for(var a in object)
{
$p[0].innerHTML += a+" "+object[a]+"<br/>";
}
}
else
{
window.console.error(arguments.callee.toString().match(/^function +(.+)\(/)[1]+"第二個參數應傳遞字符串或正則表達式");
}
$p[0].innerHTML +=showAttribute.i+++"--------------------------------------<br/>"
}
function showCollection(collection)
{
var body = $("body")[0];
var $p =$("#debugp");
if($p.length==0)
{
$p = $("<p/>").attr("id","debugp");
$(body).prepend($p);
}
for(var i=0;i<collection.length;i++)
$p[0].innerHTML = collection[i]+" |"+"<br/>" + $p[0].innerHTML;
}
function showLength(collection)
{
var body = $("body")[0];
var $p =$("#debugp");
if($p.length==0)
{
$p = $("<p/>").attr("id","debugp");
$(body).prepend($p);
}
$p[0].innerHTML = collection.length+" |"+"<br/>" + $p[0].innerHTML;
}
function DataType()
{
}
DataType.RegExp = "RegExp";
DataType.ObjectString = "Objectstring";
DataType.string = "string";
DataType.NULL = "null";
DataType.UNDEFINED = "undefined";
DataType.ObjectNumber = "Objectnumber";
DataType.number = "number";
DataType.ObjectBoolean = "Objectboolean";
DataType.boolean = "boolean";
DataType.function = "function";
DataType.array = "array";
function getType(type)
{
if(typeof type == DataType.UNDEFINED)
{
return DataType.UNDEFINED;
}
else if(typeof type == "object")
{
if(type == null)
{
return DataType.NULL ;
}
else
{
if(typeof type.valueOf() == DataType.string)
{
return DataType.ObjectString
}
else if(typeof type.valueOf() == DataType.number)
{
return DataType.ObjectNumber;
}
else if(typeof type.valueOf() == DataType.boolean)
{
return DataType.ObjectBoolean;
}
else if(type instanceof Array)
{
return DataType.array;
}
else if(type instanceof RegExp)
{
return DataType.RegExp;
}
else if(typeof type.constructor == DataType.function)
{
return type.constructor.toString().match(/^function +(.+)\(/)[1];
}
}
}
else if(typeof type == DataType.function)
{
return DataType.function
}
else
{
return typeof type;
}
}