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>
Javascript 相关文章推荐
jquery 简单导航实现代码
Sep 11 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
js 上传图片预览问题
Dec 06 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
Js的Array数组对象详解
Feb 22 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
快速解决element的autofocus失效问题
Sep 08 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
You might like
全文搜索和替换
2006/10/09 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
PHP加密技术的简单实现
2016/09/04 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
loading动画特效小结
2017/01/22 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
javascript实现评分功能
2020/06/24 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
Python删除n行后的其他行方法
2019/01/28 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
教师师德教育的自我评价
2013/10/31 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
预备党员承诺书
2014/03/25 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
工厂见习报告范文
2014/10/31 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
正规欠条模板
2015/07/03 职场文书