jQuery-H5-css3转盘抽奖-遁地龙卷风
（-1）寫在前面
這個(gè)idea不是我的，首先向這位前輩致敬。
我用的是chrome49， jquery3.0。
完整的程序案例在我的百度云盤http://pan.baidu.com/s/1jI2QSnW
最近大四實(shí)習(xí)，該走的都走了，過兩天也要去北京找一個(gè)web前段的實(shí)習(xí)機(jī)會(huì)，世界這么大，我不得不去看看…。
（0）知識(shí)儲(chǔ)備
a. webkitTransitionEnd
webkit是瀏覽器前綴，webkitTransitionEnd在過渡完成后觸發(fā)。類似DOM對(duì)象.click的方式注冊(cè)事件，對(duì)于webkitTransitionEnd事件是無(wú)效的。
b. transform:scale(0.8)
已元素中心為準(zhǔn)縮放元素，被元素包裹的內(nèi)容也跟著縮放，元素實(shí)際大小沒有發(fā)生化，（已計(jì)算后的屬性值為準(zhǔn)），注意jquery3.0的width()、height()方法會(huì)取得縮放后的尺寸!。對(duì)元素margin、top、left不跟著元素的縮放而縮放。該屬性不會(huì)繼承。
c. #arrow:active
活動(dòng)是一種持續(xù)的行為，已一個(gè)div元素為例，當(dāng)你一直按著鼠標(biāo)左鍵或有鍵不放，就會(huì)匹配改選擇器。
d. transform:rotate(45deg)
默認(rèn)以元素中心為軸心轉(zhuǎn)動(dòng)元素，如圖所示:
transform:rotate(45deg)執(zhí)行完畢后，在0度位置的信息在45度位置，轉(zhuǎn)動(dòng)是整體的，注意0度和45度這個(gè)組合，可以圍繞圓心瞬時(shí)針轉(zhuǎn)動(dòng)到任意位置，在這個(gè)案例中，我們關(guān)心的是元素轉(zhuǎn)動(dòng)的度數(shù)和指針指向區(qū)域的關(guān)系。
（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
{
???? /*鼠標(biāo)右鍵按在#arrow上時(shí),元素縮小*/
???? 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;????? //基礎(chǔ)圈數(shù)
???? $arrow.centerPos();//使元素水平垂直居中、centerPos是自定義函數(shù)
???? $active.centerPos();
???? window.onresize = function()
???? {
?????????? $arrow.centerPos();
?????????? $active.centerPos();
???? }
???? $arrow.click(function()
???? {
?????????? if($arrow.data("ding")) return;//如果#arrow正在轉(zhuǎn)動(dòng)，不向下執(zhí)行
?????????? $arrow.data("ding", true);//true表示轉(zhuǎn)動(dòng)，false表示已停止
?????????? var deg = $.random(0,360);//產(chǎn)生一個(gè)>=0&&<=360的數(shù)
?????????? $arrow.data("deg",deg);
?????????? $dial.css({
???????????????? transform:"rotate("+(rounds+deg)+"deg)",
???????????????? transition:"3s",
?????????? });
??????????
???? })
???? $dial.on("webkitTransitionEnd",function()
???? {
?????????? //旋轉(zhuǎn)結(jié)束執(zhí)行
?????????? $arrow.data("ding",false);
?????????? $dial.css({
???????????????? transition:"none",//不指定none的話等同于transition:"3s"
???????????????? transform:"rotate("+$arrow.data("deg")+"deg)",
???????????????? /*
????????????????????? 這么做會(huì)從deg(上次)轉(zhuǎn)到5*360+deg(本次)
????????????????????? 如果不這么左第一次轉(zhuǎn)動(dòng)之后,再次轉(zhuǎn)動(dòng)會(huì)5*360+deg(上次)轉(zhuǎn)到5*360+deg(本次)
?????????????????????
???????????????? */
?????????? });
?????????? var award = getAward();
?????????? alert(award);
???? })
???? function getAward()
???? {
??????????
?????????? var deg = $arrow.data("deg")
?????????? /*
???????????????? 有指針的哪個(gè)圖片初始方向相對(duì)于圓盤往右偏了2度...
?????????? */
?????????? if ((deg >= 332 && deg <= 360) || (deg > 0 && deg < 32))
?????????? {
???????????????? return "三網(wǎng)通流量 10M";
?????????? }
?????????? else if ((deg >= 32 && deg < 92))
?????????? {
???????????????? return "話費(fèi)20元";
?????????? }
?????????? else if (deg >= 92 && deg < 152)
?????????? {??????????????
???????????????? return "ipad mini4";
?????????? }
?????????? else if (deg >= 152 && deg < 212)
?????????? {
???????????????? return "話費(fèi)5元";
?????????? }
?????????? else if (deg >= 210 && deg < 272)
?????????? {
???????????????? return "三網(wǎng)通流量 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根據(jù)父元素的寬和高計(jì)算
$.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("沒有設(shè)置有效的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]+"第二個(gè)參數(shù)應(yīng)傳遞字符串或正則表達(dá)式");
???? }
???? $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;
}
}? ? ? ? ? ? ? ? ? ? ? ? ?
轉(zhuǎn)載于:https://www.cnblogs.com/resolvent/p/5921778.html
總結(jié)
以上是生活随笔為你收集整理的jQuery-H5-css3转盘抽奖-遁地龙卷风的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： .net 刷新页面防止表单二次提交
- 下一篇： 素数分布定理