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 14 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
Vue自定义toast组件的实例代码
Aug 15 Javascript
JS实现按比例缩小图片宽高
Aug 24 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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 file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
CI框架附属类用法分析
2018/12/26 PHP
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
Python中shutil模块的学习笔记教程
2017/04/04 Python
详解Python 正则表达式模块
2018/11/05 Python
python安装本地whl的实例步骤
2019/10/12 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
军训个人总结
2015/03/03 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
黄埔军校观后感
2015/06/10 职场文书
装修安全责任协议书
2016/03/22 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
使用Springboot实现健身房管理系统
2021/07/01 Java/Android