编程 Javascript

jquery实现动态画圆

Posted in Javascript onDecember 04, 2014

今天自己在写插件过程做中找到的一个不错的知识。自己做了一个小例子。

<!doctype html>

<html>

<head>

<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">

$(document).ready(function(e) {

    var a = 200, b = 200, r = 90, times = 0;

    setInterval(function flutter() {

        times += 0.1;

        var hudu = (2*Math.PI / 360) * 6 * times;

        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; left:'+X+'px; top:'+Y+'px; width:1px; height:1px; background:#00F;"></div>');

        if(times == 60){

            return;

        }

    }, 2);

});

</script>

<style type="text/css">

body,html{ padding:0; margin:0;}

</style>

</head>

<body>

<div style="position:absolute; left:198px; top:198px; width:4px; height:4px; background:#F00;"></div>

</body>

</html>

jquery实现动态画圆

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

seajs1.3.0源码解析之module依赖有序加载

Nov 07 Javascript

JavaScript子类用Object.getPrototypeOf去调用父类方法解析

Dec 05 Javascript

JavaScript的removeChild()函数用法详解

Dec 27 Javascript

JavaScript实现给定时间相加天数的方法

Jan 25 Javascript

基于javascript实现listbox左右移动

Jan 29 Javascript

javascript中的深复制详解及实例分析

Dec 29 Javascript

Javascript中的神器——Promise

Feb 08 Javascript

js实现一键复制功能

Mar 16 Javascript

js学习总结_轮播图之渐隐渐现版(实例讲解)

Jul 17 Javascript

Vue 菜单栏点击切换单个class(高亮)的方法

Aug 22 Javascript

elementUI select组件value值注意事项详解

May 29 Javascript

微信小程序云开发如何实现数据库自动备份实现

Aug 16 Javascript

javascript数组遍历for与for in区别详解

Dec 04 #Javascript

c#+jquery实现获取radio和checkbox的值

Sep 12 #Javascript

express的中间件cookieParser详解

Dec 04 #Javascript

express的中间件bodyParser详解

Dec 04 #Javascript

express的中间件basicAuth详解

Dec 04 #Javascript

详解JS函数重载

Dec 04 #Javascript

如何让你的Lightbox支持滚轮缩放及Base64图片

Dec 04 #Javascript