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 相关文章推荐
window.open打开页面居中显示的示例代码
Dec 27 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 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
资料注册后发信小技巧
2006/10/09 PHP
php 购物车的例子
2009/05/04 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
php微信开发之谷歌测距
2018/06/14 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
Python线性方程组求解运算示例
2018/01/17 Python
Python线程同步的实现代码
2018/10/03 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
如何理解transaction事务的概念
2015/05/27 面试题
外贸业务员的岗位职责
2013/11/23 职场文书
给海归自荐信的建议
2013/12/13 职场文书
优秀广告词大全
2014/03/19 职场文书
超市活动计划书
2014/04/24 职场文书
推荐信模板
2014/05/09 职场文书
网络销售员岗位职责
2015/04/11 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
JavaScript实现音乐播放器
2022/08/14 Javascript