효과 미리보기 :
1. 모의 복권의 구현 과정
회전 원칙 : CSS3 속성을지지 할 때 변환 : 회전 (각도) 설정이 설정되고 각도가 양수 일 때 시계 방향으로 회전하고 음수 일 때 반대 방향으로 회전합니다. IE8 이하의 경우 절대 위치 설정 설정을 사용하여 상단과 왼쪽을 사용하여 각도 회전을 시뮬레이션하십시오.
실행 방법, 파라미터 각도는 각도를 나타냅니다
코드 사본은 다음과 같습니다.
함수 실행 (각도) {
if (isie) {
cosdeg = math.cos (각도 * math.pi / 180);
sindeg = math.sin (각도 * math.pi / 180);
with (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";
} else if (target.style.mozTransform! == undefined) {
target.style.moztransform = "rotate (" + angle + "deg)";
} else if (target.style.otransform! == undefined) {
target.style.oTransform = "rotate (" + angle + "deg)";
} else if (target.style.webKitTransform! == undefined) {
target.style.webKitTransform = "RONTATE (" + angle + "deg)";
} 또 다른 {
target.style.transform = "rotate (" + angle + "deg)";
}
}
턴테이블 가속도, 일정한 속도 및 감속을 시뮬레이션하십시오. 각도가 특정 값보다 작을 때 1.01 계수는 가속도로 사용됩니다. 특정 값보다 클 때 감속 계수는 0.99입니다. 음수를 감속 값 (즉, 가변 TMP)으로 설정 한 다음 음수 360 (즉, 가변 m)으로 값을 얻고이 값보다 큰 경우 턴테이블이 중지됩니다.
코드 사본은 다음과 같습니다.
var tmp = -900;
var m = -perseint (math.random () * 360);
타이머 = setInterval (function () {
if (i> 3000) {
tmp = parseint (tmp * 0.99);
if (tmp> m) {
tmp = m;
ClearInterval (타이머);
msg (m);
}
실행 (TMP);
}
else if (i> 1000) {
i = i + 45;
실행 (i);
}
또 다른 {
i = parseint ((i + 1) * 1.01);
실행 (i);
}
}, 50);
복권을 시작하고 복권을 재설정하십시오
코드 사본은 다음과 같습니다.
<입력 id = "test"type = "button"value = "luck draw" />
<input id = "다시 시작"Style = "디스플레이 : 없음;" type = "button"value = "다시 그리기" />
m $ ( 'test'). onclick = function () {
m $ ( 'test'). style.display = "none";
showmsg ();
}
m $ ( '다시 시작'). onclick = function () {
m $ ( '다시 시작'). style.display = "none";
if (isie) {
m $ ( "데모"). style.top = "0px";
m $ ( "데모"). style.left = "0px";
} else if (m $ ( "demo"). style.mozTransform! == undefined) {
m $ ( "demo"). style.moztransform = 'rotate (0deg)';
} else if (m $ ( "demo"). style.otransform! == undefined) {
m $ ( "demo"). style.otransform = 'rotate (0deg)';
} else if (m $ ( "demo"). Style.wybkitTransform! == undefined) {
m $ ( "demo"). Style.wybkitTransform = 'rotate (0deg)';
} 또 다른 {
m $ ( "demo"). style.transform = 'rotate (0deg)';
}
m $ ( 'test'). style.display = "block";
i = 0;
}
2. 코드 데모 완료 :
다음과 같이 코드를 복사하십시오. <! doctype html>
<html>
<헤드>
<title> 추첨 복권 </title>
<스타일 유형 = "텍스트/CSS">
#container {너비 : 400px; 높이 : 400px; 위치 : 상대; 여백 : 0 Auto;}
#demo {위치 : 절대; 필터 : progid : dximagetransform.microsoft.matrix (sizateMethod = "auto expand");}
</스타일>
</head>
<바디 스타일 = "높이 : 1000px;">
<div id = "컨테이너">
<div id = "데모">
<img src = "// files.vevb.com/file_images/article/201406/20146394819279.png"/>
</div>
</div>
<입력 id = "test"type = "button"value = "luck draw" />
<input 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 (target, msg) {
대상 = m $ (target);
var organw = target.clientWidth, orginh = target.clientHeight;
ClearInterval (타이머);
함수 실행 (각도) {
if (isie) {
cosdeg = math.cos (각도 * math.pi / 180);
sindeg = math.sin (각도 * math.pi / 180);
with (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";
} else if (target.style.mozTransform! == undefined) {
target.style.moztransform = "rotate (" + angle + "deg)";
} else if (target.style.otransform! == undefined) {
target.style.oTransform = "rotate (" + angle + "deg)";
} else if (target.style.webKitTransform! == undefined) {
target.style.webKitTransform = "RONTATE (" + angle + "deg)";
} 또 다른 {
target.style.transform = "rotate (" + angle + "deg)";
}
}
var tmp = -900;
var m = -perseint (math.random () * 360);
타이머 = setInterval (function () {
if (i> 3000) {
tmp = parseint (tmp * 0.99);
if (tmp> m) {
tmp = m;
ClearInterval (타이머);
msg (m);
}
실행 (TMP);
}
else if (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";
}
else if (m> -150 && m <-90) {
m $ ( "msg"). innerhtml += "333333333";
}
else if (m> -210 && m <-150) {
m $ ( "msg"). innerhtml += "444444";
}
else if (m> -270 && m <-210) {
m $ ( "msg"). innerhtml += "5555555";
}
else if (m> -330 && m <-270) {
m $ ( "msg"). innerhtml += "6666666";
} 또 다른 {
m $ ( "msg"). innerhtml += "111111111";
}
m $ ( '다시 시작'). style.display = "block";
});
}
Window.onload = function () {
m $ ( 'test'). onclick = function () {
m $ ( 'test'). style.display = "none";
showmsg ();
}
m $ ( '다시 시작'). onclick = function () {
m $ ( '다시 시작'). style.display = "none";
if (isie) {
m $ ( "데모"). style.top = "0px";
m $ ( "데모"). style.left = "0px";
} else if (m $ ( "demo"). style.mozTransform! == undefined) {
m $ ( "demo"). style.moztransform = 'rotate (0deg)';
} else if (m $ ( "demo"). style.otransform! == undefined) {
m $ ( "demo"). style.otransform = 'rotate (0deg)';
} else if (m $ ( "demo"). Style.wybkitTransform! == undefined) {
m $ ( "demo"). Style.wybkitTransform = 'rotate (0deg)';
} 또 다른 {
m $ ( "demo"). style.transform = 'rotate (0deg)';
}
m $ ( 'test'). style.display = "block";
i = 0;
}
}
</스크립트>
</body>
</html>