jquery는 동적 원 그리기를 실현합니다

집

웹 프론트엔드

JS 튜토리얼

jquery는 동적 원 그리기를 실현합니다_jquery

May 16, 2016 pm 04:29 PM

jquery

오늘 플러그인을 작성하다가 좋은 지식을 발견했습니다. 나는 작은 예를 직접 만들었습니다.

코드 복사 코드는 다음과 같습니다.

<!doctype html>
<html>

<meta charset="utf-8">
<title>제목 없는 문서</title>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(문서).ready(함수(e) {
var a = 200, b = 200, r = 90, times = 0;
setInterval(함수 flutter() {
횟수 = 0.1;
var hudu = (2*Math.PI / 360) * 6 * 회;
var X = a Math.sin(hudu) * r;
var Y = b - Math.cos(hudu) * r // 우리가 얻으려는 Y는 (0,0)에 상대적이기 때문에 여기에 "-" 기호가 있다는 점에 유의하세요.
//$(".sky_text").css({"left":X "px","top":Y "px"});
$("body").append('<div style="position:absolute; 왼쪽:' X 'px; 위쪽:' Y 'px; 너비:1px; 높이:1px; 배경:#00F;">

');
If(회 == 60){
반품;
}
}, 2);
});

<style type="text/css">
본문,html{ 패딩:0; 여백:0;}
</스타일>
</머리>

<div 스타일="위치:절대; 왼쪽:198px; 위쪽:198px; 너비:4px; 높이:4px; 배경:#F00;"></div>
</본문>

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.