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游戏之优化篇
Nov 08 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
详解Node.JS模块 process
Aug 31 Javascript
js通过canvas生成图片缩略图
Oct 02 Javascript
实现vuex原理的示例
Oct 21 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操作数组相关函数
2011/02/03 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
js代码实现微博导航栏
2015/07/30 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
js日期联动示例
2014/05/02 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
python实现代码统计器
2019/09/19 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
销售部主管岗位职责
2013/12/18 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
结婚幸福感言
2015/08/01 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
Python实现批量自动整理文件
2022/03/16 Python