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 相关文章推荐
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
Element实现动态表格的示例代码
Aug 02 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开发中常用的8个小技巧
2008/08/27 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
详解Django通用视图中的函数包装
2015/07/21 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
python 如何在测试中使用 Mock
2021/03/01 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
公立医院改革实施方案
2014/03/14 职场文书
《学棋》教后反思
2014/04/14 职场文书
安全生产月宣传标语
2014/10/06 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
校园安全学习心得体会
2016/01/18 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python
python实现商品进销存管理系统
2022/05/30 Python