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 18 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
js实现每日签到功能
Nov 29 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
vue实现倒计时获取验证码效果
Apr 17 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之static静态属性与静态方法实例分析
2015/07/30 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Django添加feeds功能的示例
2018/08/07 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
浅析Python requests 模块
2020/10/09 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
抽象方法、抽象类怎样声明
2014/10/25 面试题
学校推普周活动总结
2015/05/07 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android