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插件开发全解析
Oct 10 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
网络传输协议(http协议)
Nov 18 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
JavaScript中reduce()的用法
May 11 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来处理多个提交任务
2006/10/09 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
python实现数组插入新元素的方法
2015/05/22 Python
Python3 中文文件读写方法
2018/01/23 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
销售主管岗位职责
2014/02/08 职场文书
物业管理工作方案
2014/05/10 职场文书
人民调解员培训方案
2014/06/05 职场文书
专科生就业求职信
2014/06/22 职场文书
年检委托书
2014/08/30 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
学术会议通知范文
2015/04/15 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
python运算符之与用户交互
2022/04/13 Python