编程 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 相关文章推荐

jQuery在vs2008及js文件中的无智能提示的解决方法

Dec 30 Javascript

js返回上一页并刷新的多种实现方法

Feb 26 Javascript

jquery实现效果比较好的table选中行颜色

Mar 25 Javascript

JQuery1.8 判断元素是否绑定事件的方法

Jul 10 Javascript

JavaScript实现在数组中查找不同顺序排列的字符串

Sep 26 Javascript

JavaScript操作Oracle数据库示例

Mar 06 Javascript

JavaScript实现自动对页面上敏感词进行屏蔽的方法

Jul 27 Javascript

JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

Aug 06 Javascript

基于angular2 的 http服务封装的实例代码

Jun 29 Javascript

浅谈JavaScript中的属性:如何遍历属性

Sep 14 Javascript

详解Vue.js自定义tipOnce指令用法实例

Dec 19 Javascript

小程序实现筛子抽奖

May 26 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