JavaScript 구애 특수 효과는 다음과 같습니다. 효과는 다음과 같습니다.
아래 그림의 효과가 나타날뿐만 아니라 마우스와 함께 그림을 회전시킬 수도 있습니다. 이것은 단순하고 수정되지 않은 예일뿐입니다. 이 예를 바탕으로 구애를 더 재미있게 만들 수 있습니다. 꺼리는 남자, 당신은 그런 웹 페이지를 당신의 작은 롤리에 게시 할 수 있습니까? 엄청난.
코드 게시 :
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> 제목을 여기에 삽입하십시오 </title>
<스타일 유형 = "텍스트/CSS">
몸{
테두리 : 1px 빨간색 고체;
너비 : 1000px;
높이 : 1000px;
마진 : 0px 자동;
패딩 : 0px;
색상 : 녹색;
}
/*
왼쪽, 오른쪽, 상단, 하단 등과 같은 속성을 사용하여 문서 스트림에서 객체를 드래그하십시오.
절대 포지셔닝을 위해 가장 위치한 부모 객체에 가장 가깝습니다. 그러한 부모 객체가 존재하지 않으면
신체 대상으로. 캐스케이드는 z-index 속성에 의해 정의됩니다
*/
div {
위치 : 절대;
}
</스타일>
<script type = "text/javaScript">
// OnLoad를 사용해야하는 이유는 무엇입니까? JavaScript 코드에서 시계의 div를 초기화 할 때 디버그 페이지는 구현이 없음을 발견했습니다.
// 나중에 그 이유를 알았습니다. HTML 코드가 앞뒤로 구문 분석되었습니다. JavaScript 코드를 먼저 구문 분석 할 때 신체로 이동하십시오
// 하위 노드를 추가 할 때 해결되지 않은 본체를 찾을 수 없습니다. 따라서 먼저 몸을 구문 분석해야합니다. 두 가지 방법이 있습니다
//의 작문 방법은 다른 방법으로 본로드 메소드를 바디 태그에 추가하는 것입니다.
Window.onload = function () {
init ();
};
// 12 divs를 저장하기 위해 div 배열을 정의합니다
// 12 개의 div 위치 사이의 관계 때문에 먼저 div의 위치를 계산하기 위해 점과 반경을 결정합니다.
var divs = [];
var LockBaby = [ "I", "Love", "You", "You", "You", "Bao", "Bei", "Love", "Love", "Me", "Wan", "Wan", "Wan", "Wan" "Wan" "Wan" "Wan" "Wan" "WA n ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan ""wan
var cx = 300;
var CY=300;//--------------------------------------------------------------------------------------------------------------------
var r = 150;
var divcenternode; // 중심 지점의 위치를 제어해야하며 글로벌 변수를 설정해야합니다.
// 초기 기능을 정의합니다
함수 init () {
// 중앙 포인트 위치에서 DIV 생성 (구애 대상을 작성할 수 있음)
divcenternode = document.createElement ( "div");
divcenternode.innerhtml = "tingting, 결혼!";
Document.body.appendChild (DivcenterNode);
divcenternode.style.left = (CX-50)+"px";
divcenternode.style.top = (cy-30)+"px";
// 금지 된 시계를 형성하기 위해 12 개의 div를 생성하고 신체에 넣습니다.
for (var x = 1; x <= 12; x ++) {
// div를 만듭니다
var divnode = document.createElement ( "div");
divnode.innerhtml = Lockaby [x-1];
// 바디 객체는 다른 객체처럼 얻을 필요가 없으며 JS 라이브러리가 캡슐화되었습니다.
Document.body.appendChild (Divnode);
divs.push (divnode);
}
// startClock ()가 div 요소를 재배치하기 시작할 때마다 매번
/*
실제로 회전 효과를 달성하기 위해서는 지속적으로 오프셋해야합니다.
재배치하지만 루핑은 기능을 시작하는 데 걸리는 시간을 제어 할 수 없습니다.
현재 창 객체는 메소드를 제공합니다.
*/
startClock ();
}
// div의 오프셋
var 오프셋 = 0; // 학위 오프셋
// 위치를 정의하고 위치를 별도로 회전시킵니다.
함수 startClock () {
for (var x = 1; x <= 12; x ++) {
var div = divs [x-1];
// 각 숫자의 정도
var dushu = 30*x+오프셋;
// 각도 값* math.pi /180 = 레이 값
var divleft = cx+r*math.sin (dushu*math.pi/180);
div.style.left = divleft+"px";
var divtop = cy-r*math.cos (dushu*math.pi/180);
div.style.top = divtop+"px";
}
오프셋+= 50;
// 특정 간격, 콜백이 함수
// 표현식은 지정된 밀리 초 값 후에 계산됩니다. 첫 번째 매개 변수는 표현식이고 두 번째 매개 변수는 시간입니다.
settimeout (startClock, 80); // 창 객체의 메소드
}
// 마우스가 움직일 때이 시계를 다른 위치로 정의합니다.
기능 클럭 모드 (이벤트) {
cx = event.clientx; // 마우스 위치의 x 코디네이션
cy = event.clienty; // 마우스 위치의 y 좌표
divcenternode.style.left = (CX-50)+"px";
divcenternode.style.top = (cy-30)+"px";
}
</스크립트>
</head>
<Body OnMousEmove = "ClockMove (이벤트)">
<!-
1. 원에 12 숫자를 표시합니다
1/12 개의 div를 생성하고 각각 값 1-12를 할당합니다
2/12 개의 div를 찾아 원을 형성합니다.
->
</body>
</html>
원래 회전하고 실행할 수있는 시계 디스플레이를 만들고 싶었습니다. 따라서 코드의 이름 지정은 시계와 관련이 있으므로 혼란스럽지 않을 것입니다. JavaScript의 초보자, 나는 JavaScript가 매우 강력하다고 생각합니다.