معاينة التأثير:
1. عملية تنفيذ اليانصيب المحاكاة
مبدأ الدوران: عند دعم سمة CSS3 ، يتم تحويل إعداد (DEGLE DEG) ، وتدوير في اتجاه عقارب الساعة عندما تكون الزاوية إيجابية ، وتدوير عقارب الساعة عندما تكون سلبية. إذا كان IE8 وأقل ، فاستخدم إعدادات تحديد المواقع المطلقة لمحاكاة دوران الزاوية باستخدام العلوي واليسرى.
طريقة التشغيل ، تشير زاوية المعلمة إلى الزاوية
نسخة الكود كما يلي:
وظيفة تشغيل (زاوية) {
إذا (isie) {
cosdeg = math.cos (angle * math.pi / 180) ؛
sindeg = math.sin (angle * math.pi / 180) ؛
مع (target.filters.item (0)) {
M11 = M22 = cosdeg ؛ M12 = -(M21 = sindeg) ؛
}
target.style.top = (orginh - target.offsetheight) / 2 + "px" ؛
target.style.left = (orginw - target.offsetWidth) / 2 + "px" ؛
} آخر إذا (target.style.moztransform! == undefined) {
Target.Style.MozTransform = "Rotate (" + angle + "deg)" ؛
} آخر إذا (target.style.otransform! == undefined) {
Target.Style.Otransform = "Rotate (" + angle + "deg)" ؛
} آخر إذا (target.style.webkittransform! == undefined) {
Target.Style.WebKitTransform = "Rotate (" + angle + "deg)" ؛
} آخر {
target.style.transform = "rotate (" + angle + "deg)" ؛
}
}
محاكاة تسريع القرص الدوار والسرعة الثابتة والتباطاع. عندما تكون الزاوية أقل من قيمة معينة ، يتم استخدام معامل 1.01 باعتباره التسارع. عندما يكون أكبر من قيمة معينة ، يتم استخدام معامل التباطؤ 0.99 لإبطاء. اضبط الرقم السلبي كقيمة التباطؤ (أي المتغير TMP) ، ثم الحصول على القيمة في 360 السلبية (أي المتغير M) ، وعندما يكون أكبر من هذه القيمة ، يتوقف القرص الدوار.
نسخة الكود كما يلي:
var tmp = -900 ؛
var m = -parseint (Math.Random () * 360) ؛
Timer = setInterval (function () {
if (i> 3000) {
TMP = parseint (TMP * 0.99) ؛
if (tmp> m) {
TMP = M ؛
ClearInterval (مؤقت) ؛
MSG (M) ؛
}
تشغيل (TMP) ؛
}
آخر إذا (i> 1000) {
i = i + 45 ؛
تشغيل (ط) ؛
}
آخر {
i = parseint ((i + 1) * 1.01) ؛
تشغيل (ط) ؛
}
} ، 50) ؛
ابدأ يانصيب وأعد ضبط اليانصيب
نسخة الكود كما يلي:
<input id = "test" type = "button" value = "Luck Draw" />
<INPUT ID = "RETART" style = "Display: None ؛" اكتب = "زر" value = "ارسم مرة أخرى" />
m $ ('test'). onClick = function () {
m $ ('test'). style.display = "none" ؛
Showmsg () ؛
}
m $ ('إعادة التشغيل'). onClick = function () {
M $ ('RESTART'). style.display = "none" ؛
إذا (isie) {
m $ ("Demo"). style.top = "0px" ؛
m $ ("Demo"). style.left = "0px" ؛
} آخر إذا (m $ ("Demo"). style.moztransform! == undefined) {
M $ ("Demo"). style.moztransform = 'Rotate (0deg)' ؛
} آخر إذا (m $ ("Demo"). style.otransform! == undefined) {
m $ ("Demo"). style.otransform = 'rotate (0deg)' ؛
} آخر إذا (m $ ("demo"). style.webkittransform! == undefined) {
m $ ("Demo"). style.webkittransform = 'Rotate (0deg)' ؛
} آخر {
m $ ("Demo"). style.transform = 'Rotate (0deg)' ؛
}
m $ ('test'). style.display = "block" ؛
أنا = 0 ؛
}
2. COMPLE CODE DEMO:
انسخ الرمز كما يلي: <! doctype html>
<html>
<head>
<title> يانصيب يانصيب </title>
<type type = "text/css">
#container {width: 400px ؛ الارتفاع: 400px ؛ الموضع: النسبية ؛ الهامش: 0 auto ؛}
#demo {position: absolute ؛ filter: progid: dimizageTransform.microsoft.matrix (ZizeMethod = "Auto Expension") ؛}
</style>
</head>
<body style = "الارتفاع: 1000px ؛">
<div id = "container">
<div id = "demo">
<img src = "// files.vevb.com/file_images/article/201406/20146394819279.png"/>
</div>
</div>
<input id = "test" type = "button" value = "Luck Draw" />
<INPUT ID = "RETART" style = "Display: None ؛" اكتب = "زر" value = "ارسم مرة أخرى" />
<div id = "msg">
</div>
<script type = "text/javaScript">
var m $ = function (id) {return document.getElementById (id) ؛ }
var ua = navigator.useragent ؛
var isie = /msie/i.test(ua) &&! window.opera ؛
var i = 1 ، sindeg = 0 ، cosdeg = 0 ، timer = null ؛
var mrotate = function () {
var rotate = function (target ، msg) {
Target = M $ (Target) ؛
var urganw = target.clientwidth ، orginh = target.clientheight ؛
ClearInterval (مؤقت) ؛
وظيفة تشغيل (زاوية) {
إذا (isie) {
cosdeg = math.cos (angle * math.pi / 180) ؛
sindeg = math.sin (angle * math.pi / 180) ؛
مع (target.filters.item (0)) {
M11 = M22 = cosdeg ؛ M12 = -(M21 = sindeg) ؛
}
target.style.top = (orginh - target.offsetheight) / 2 + "px" ؛
target.style.left = (orginw - target.offsetWidth) / 2 + "px" ؛
} آخر إذا (target.style.moztransform! == undefined) {
Target.Style.MozTransform = "Rotate (" + angle + "deg)" ؛
} آخر إذا (target.style.otransform! == undefined) {
Target.Style.Otransform = "Rotate (" + angle + "deg)" ؛
} آخر إذا (target.style.webkittransform! == undefined) {
Target.Style.WebKitTransform = "Rotate (" + angle + "deg)" ؛
} آخر {
target.style.transform = "rotate (" + angle + "deg)" ؛
}
}
var tmp = -900 ؛
var m = -parseint (Math.Random () * 360) ؛
Timer = setInterval (function () {
if (i> 3000) {
TMP = parseint (TMP * 0.99) ؛
if (tmp> m) {
TMP = M ؛
ClearInterval (مؤقت) ؛
MSG (M) ؛
}
تشغيل (TMP) ؛
}
آخر إذا (i> 1000) {
i = i + 45 ؛
تشغيل (ط) ؛
}
آخر {
i = parseint ((i + 1) * 1.01) ؛
تشغيل (ط) ؛
}
} ، 50) ؛
}
العودة {تدوير: تدوير}
} () ؛
وظيفة showmsg () {
mrotate.rotate ("Demo" ، وظيفة msg (m) {
if (m> -90 && m <-30) {
m $ ("msg"). innerhtml += "22222222" ؛
}
آخر إذا (m> -150 && m <-90) {
m $ ("msg"). innerhtml += "333333333" ؛
}
آخر إذا (m> -210 && m <-150) {
m $ ("msg"). innerhtml += "444444" ؛
}
آخر إذا (m> -270 && m <-210) {
m $ ("msg"). innerhtml += "5555555" ؛
}
آخر إذا (m> -330 && m <-270) {
m $ ("msg"). innerhtml += "6666666" ؛
} آخر {
m $ ("msg"). innerhtml += "111111111" ؛
}
m $ ('RESTART'). style.display = "block" ؛
}) ؛
}
window.onload = function () {
m $ ('test'). onClick = function () {
m $ ('test'). style.display = "none" ؛
Showmsg () ؛
}
m $ ('إعادة التشغيل'). onClick = function () {
M $ ('RESTART'). style.display = "none" ؛
إذا (isie) {
m $ ("Demo"). style.top = "0px" ؛
m $ ("Demo"). style.left = "0px" ؛
} آخر إذا (m $ ("Demo"). style.moztransform! == undefined) {
M $ ("Demo"). style.moztransform = 'Rotate (0deg)' ؛
} آخر إذا (m $ ("Demo"). style.otransform! == undefined) {
m $ ("Demo"). style.otransform = 'rotate (0deg)' ؛
} آخر إذا (m $ ("demo"). style.webkittransform! == undefined) {
m $ ("Demo"). style.webkittransform = 'Rotate (0deg)' ؛
} آخر {
m $ ("Demo"). style.transform = 'Rotate (0deg)' ؛
}
m $ ('test'). style.display = "block" ؛
أنا = 0 ؛
}
}
</script>
</body>
</html>