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 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
JavaScript如何判断input数据类型
Feb 06 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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP多例模式介绍
2013/06/24 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
python实现中文文本分句的例子
2019/07/15 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
台湾旅游网站:灿星旅游
2018/10/11 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
护士自我鉴定范文
2013/10/06 职场文书
医院总经理职责
2013/12/26 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
创先争优承诺书范文
2014/03/31 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
2014年组织部工作总结
2014/11/14 职场文书
大班上学期个人总结
2015/02/13 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python