취미 프로 그래 밍 -- JavaScript -- 꽃 을 끊임없이 돌리 게 합 니 다.
3384 단어 자바 script
이번 수업 은 주로 어떻게 꽃 을 회전 시 키 는 지 를 말한다.
꽃 이란 그림 입 니 다. 사실은 그림 입 니 다. 자 바스 크 립 트 에서 우 리 는 어떤 방법 으로 그림 을 회전 시 킬 수 있 습 니까?천천히 얘 기 하 자.우선 이 몇 가지 단 어 를 배 워 보 겠 습 니 다. rotate (회전), document (문서), interval (간격), transform (변경).이어서 몇 개의 문장 을 배 웁 니 다. var imageName = document. getElement ById ("imageId");이 방법 은 document 대상 에서 id 와 일치 하 는 그림 을 선택 하여 우리 가 정의 한 그림 대상 이름 에 저장 하 는 것 입 니 다.오직 이렇게 해야만 우 리 는 그 후에 야 그것 을 호출 할 수 있다.setInterval (function () {}, 10); 이 방법 은 타이머 의 방법 입 니 다. 방법 에는 두 개의 인자 가 있 습 니 다. 하 나 는 방법 이 고 하 나 는 숫자 입 니 다. 숫자 는 우리 가 실행 하 는 방법의 간격 입 니 다. 여 기 는 10 밀리초 입 니 다. 즉, 우 리 는 10 밀리초 마다 들 어 오 는 방법 을 실행 합 니 다. imageName. style. msTransform = "rotate (- 90deg)"/ / IE 9 브 라 우 저 imageName. style. MozTransform = "rotate (- 90deg)" / / Firefox 브 라 우 저 imageName. style. webkitTransform = "rotate (- 90deg)" / / Safari 및 Chrome 브 라 우 저 imageName. style. OTransform = "rotate (- 90deg)"/ / Opera 브 라 우 저 위의 문 구 는 그림 을 회전 시 키 는 문구 입 니 다. 브 라 우 저 마다 다른 실행 문 구 를 가지 고 있 습 니 다. - 90dge 는 회전 하 는 도 수 를 말 합 니 다. 변경 할 수 있 습 니 다. 마지막 코드:
<html>
<head>
<meta charset="utf-8">
<title> title>
head>
<body>
<img id="flower" src="Image/sflower3.png" />
<script>
var f = document.getElementById("flower");
var r=1;
setInterval(function() {
f.style.webkitTransform = "rotate("+r+"deg)"
r=r+1;
/*f.style.MozTransform = "rotate(-90deg)"
f.style.msTransform = "rotate(-90deg)"
f.style.OTransform = "rotate(-90deg)"*/
}, 10)
script>
body>
html> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
