ตัวอย่างเอฟเฟกต์:
1. กระบวนการดำเนินการของลอตเตอรีจำลอง
หลักการหมุน: เมื่อรองรับแอตทริบิวต์ CSS3 การแปลง: การตั้งค่าการหมุน (มุม DEG) จะถูกตั้งค่าหมุนตามเข็มนาฬิกาเมื่อมุมเป็นบวกและหมุนทวนเข็มนาฬิกาเมื่อมันเป็นลบ หากเป็น IE8 และด้านล่างให้ใช้การตั้งค่าตำแหน่งสัมบูรณ์เพื่อจำลองการหมุนมุมโดยใช้ด้านบนและซ้าย
วิธีเรียกใช้มุมพารามิเตอร์หมายถึงมุม
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นเรียกใช้ (มุม) {
ถ้า (isie) {
cosdeg = math.cos (angle * math.pi / 180);
sindeg = math.sin (มุม * 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 = "หมุน (" + angle + "deg)";
} อื่นถ้า (target.style.otransform! == ไม่ได้กำหนด) {
target.style.otransform = "หมุน (" + angle + "deg)";
} อื่นถ้า (target.style.webkittransform! == undefined) {
target.style.webkittransform = "หมุน (" + angle + "deg)";
} อื่น {
target.style.transform = "หมุน (" + angle + "deg)";
-
-
จำลองการเร่งความเร็วแผ่นเสียงความเร็วคงที่และการชะลอตัว เมื่อมุมน้อยกว่าค่าที่แน่นอนค่าสัมประสิทธิ์ 1.01 จะถูกใช้เป็นการเร่งความเร็ว เมื่อมากกว่าค่าที่แน่นอนค่าสัมประสิทธิ์การชะลอตัวคือ 0.99 จะถูกใช้เพื่อชะลอตัวลง ตั้งค่าจำนวนลบเป็นค่าของการชะลอตัว (เช่นตัวแปร TMP) จากนั้นรับค่าในค่าลบ 360 (เช่นตัวแปร M) และเมื่อมันมากกว่าค่านี้จะหยุดลง
การคัดลอกรหัสมีดังนี้:
var tmp = -900;
var m = -parseint (math.random () * 360);
timer = setInterval (ฟังก์ชัน () {
ถ้า (i> 3000) {
tmp = parseint (tmp * 0.99);
ถ้า (tmp> m) {
tmp = m;
ClearInterval (ตัวจับเวลา);
ผงชูรส (M);
-
เรียกใช้ (TMP);
-
อื่นถ้า (i> 1000) {
i = i + 45;
เรียกใช้ (i);
-
อื่น {
i = parseInt ((i + 1) * 1.01);
เรียกใช้ (i);
-
}, 50);
เริ่มลอตเตอรีและรีเซ็ตลอตเตอรี
การคัดลอกรหัสมีดังนี้:
<อินพุต id = "ทดสอบ" type = "ปุ่ม" value = "Luck Draw" />
<อินพุต id = "รีสตาร์ท" style = "จอแสดงผล: ไม่มี;" type = "button" value = "วาดอีกครั้ง" />
m $ ('ทดสอบ'). onclick = function () {
m $ ('ทดสอบ'). style.display = "ไม่มี";
showmsg ();
-
m $ ('รีสตาร์ท'). onclick = function () {
m $ ('รีสตาร์ท'). style.display = "ไม่มี";
ถ้า (isie) {
m $ ("สาธิต"). style.top = "0px";
m $ ("สาธิต"). style.left = "0px";
} อื่นถ้า (m $ ("demo"). style.moztransform! == undefined) {
m $ ("สาธิต"). style.moztransform = 'หมุน (0deg)';
} อื่นถ้า (m $ ("demo"). style.otransform! == undefined) {
m $ ("สาธิต"). style.otransform = 'หมุน (0deg)';
} อื่นถ้า (m $ ("demo"). style.webkittransform! == undefined) {
m $ ("สาธิต"). style.webkittransform = 'หมุน (0deg)';
} อื่น {
m $ ("สาธิต"). style.transform = 'หมุน (0deg)';
-
m $ ('ทดสอบ'). style.display = "block";
i = 0;
-
2. การสาธิตรหัสที่สมบูรณ์:
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html>
<head>
<title> ลอตเตอรีล็อตเตอรี่ </title>
<style type = "text/css">
#Container {width: 400px; ความสูง: 400px; ตำแหน่ง: สัมพัทธ์; มาร์จิ้น: 0 auto;}
#DEMO {ตำแหน่ง: Absolute; Filter: Progid: Dximagetransform.microsoft.matrix (SizingMethod = "Auto Expand");}
</style>
</head>
<body style = "ความสูง: 1000px;">
<div id = "container">
<div id = "demo">
<img src = "// files.vevb.com/file_images/article/201406/20146394819279.png"/>
</div>
</div>
<อินพุต id = "ทดสอบ" type = "ปุ่ม" value = "Luck Draw" />
<อินพุต id = "รีสตาร์ท" style = "จอแสดงผล: ไม่มี;" type = "button" 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 (เป้าหมาย, msg) {
target = m $ (เป้าหมาย);
var organw = target.clientWidth, orginh = target.clientheight;
ClearInterval (ตัวจับเวลา);
ฟังก์ชั่นเรียกใช้ (มุม) {
ถ้า (isie) {
cosdeg = math.cos (angle * math.pi / 180);
sindeg = math.sin (มุม * 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 = "หมุน (" + angle + "deg)";
} อื่นถ้า (target.style.otransform! == ไม่ได้กำหนด) {
target.style.otransform = "หมุน (" + angle + "deg)";
} อื่นถ้า (target.style.webkittransform! == undefined) {
target.style.webkittransform = "หมุน (" + angle + "deg)";
} อื่น {
target.style.transform = "หมุน (" + angle + "deg)";
-
-
var tmp = -900;
var m = -parseint (math.random () * 360);
timer = setInterval (ฟังก์ชัน () {
ถ้า (i> 3000) {
tmp = parseint (tmp * 0.99);
ถ้า (tmp> m) {
tmp = m;
ClearInterval (ตัวจับเวลา);
ผงชูรส (M);
-
เรียกใช้ (TMP);
-
อื่นถ้า (i> 1000) {
i = i + 45;
เรียกใช้ (i);
-
อื่น {
i = parseInt ((i + 1) * 1.01);
เรียกใช้ (i);
-
}, 50);
-
return {rotate: rotate}
-
ฟังก์ชั่น showmsg () {
mrotate.rotate ("สาธิต", ฟังก์ชั่น msg (m) {
if (m> -90 && m <-30) {
m $ ("msg"). innerhtml += "22222222";
-
อื่นถ้า (m> -150 && m <-90) {
m $ ("msg"). innerhtml += "3333333333";
-
อื่นถ้า (m> -210 && m <-150) {
m $ ("msg"). innerhtml += "4444444";
-
อื่นถ้า (m> -270 && m <-210) {
m $ ("msg"). innerhtml += "5555555";
-
อื่นถ้า (m> -330 && m <-270) {
m $ ("msg"). innerhtml += "66666666";
} อื่น {
m $ ("msg"). innerhtml += "111111111";
-
m $ ('รีสตาร์ท'). style.display = "block";
-
-
window.onload = function () {
m $ ('ทดสอบ'). onclick = function () {
m $ ('ทดสอบ'). style.display = "ไม่มี";
showmsg ();
-
m $ ('รีสตาร์ท'). onclick = function () {
m $ ('รีสตาร์ท'). style.display = "ไม่มี";
ถ้า (isie) {
m $ ("สาธิต"). style.top = "0px";
m $ ("สาธิต"). style.left = "0px";
} อื่นถ้า (m $ ("demo"). style.moztransform! == undefined) {
m $ ("สาธิต"). style.moztransform = 'หมุน (0deg)';
} อื่นถ้า (m $ ("demo"). style.otransform! == undefined) {
m $ ("สาธิต"). style.otransform = 'หมุน (0deg)';
} อื่นถ้า (m $ ("demo"). style.webkittransform! == undefined) {
m $ ("สาธิต"). style.webkittransform = 'หมุน (0deg)';
} อื่น {
m $ ("สาธิต"). style.transform = 'หมุน (0deg)';
-
m $ ('ทดสอบ'). style.display = "block";
i = 0;
-
-
</script>
</body>
</html>