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 相关文章推荐
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
原生JavaScript实现换肤
Feb 19 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
PHP的伪随机数与真随机数详解
2015/05/27 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
Python栈类实例分析
2015/06/15 Python
Python中str.join()简单用法示例
2018/03/20 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
对numpy中轴与维度的理解
2018/04/18 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Python 转换文本编码实现解析
2019/08/27 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
Python接收手机短信的代码整理
2020/08/02 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
一套带网友答案的.NET笔试题
2016/12/06 面试题
医院护士专业个人的求职信
2013/12/09 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
实验室标语
2014/06/21 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
校长一岗双责责任书
2015/05/09 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
Elasticsearch 批量操作
2022/04/19 Python