jquery实现动态画圆
今天自己在写插件过程做中找到的一个不错的知识。自己做了一个小例子。
<!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>
相关推荐
-
jQuery动态创建html元素的常用方法汇总
本文实例讲述了jQuery动态创建html元素的常用方法,在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到数组中,再遍历数组动态创建html元素 3.使用模版 1.使用jQuery动态创建元素追加到jQuery对象上. <meta http-equiv="Content-Type" content="text/html;
-
jquery 动态创建元素的方式介绍及应用
一般动态创建元素可以通过两种方式 1.Dom HTml 复制代码 代码如下: var select = document.createElement("select"); select.options[0] = new Option("加载项1", "value1"); select.options[1] = new Option("加载项2", "value2"); select.size = "
-
jQuery动态地获取系统时间实现代码
jQuery部分代码: 复制代码 代码如下: <script type="text/javascript"> function current(){ var d=new Date(),str=''; str +=d.getFullYear()+'年'; //获取当前年份 str +=d.getMonth()+1+'月'; //获取当前月份(0--11) str +=d.getDate()+'日'; str +=d.getHours()+'时'; str +=d.getMin
-
jQuery获取动态生成的元素示例
需求描述:页面上可以动态添加数据,比如table,点击按钮可以动态添加行.又或页面 加载时table数据是通过ajax从后台获取的.而这时我们想要获取其中的某个值,又该如何获取呢? 如果是要通过某个事件来获取的比如click,mouseover等等,则可以使用live()方法 复制代码 代码如下: $(".button").live("click",function(){ console.info($("#mytd").html()); }) 而
-
jquery动态调整div大小使其宽度始终为浏览器宽度
有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.js"><
-
jQuery 动态云标签插件
前言: 最近对js的插件封装特别感兴趣,无耐就目前的技术想做到js的完全封装,还是有一定困难,就基于jQuery封装了一个小的插件,而且是基于对象级开发的,不是添加全局方法.高深的语法几乎没有,就有一个return:foreach()方法来返回对象实例本身,还有一个extend()函数,用来扩展参数对象的属性,这也是为了对象在调完我这个方法后方便链式操作. 插件打包下载地址:点我下载 插件名:动态云标签 插件特点: 在指定块级元素内动态生成a标签 a标签的高度.宽度.位置.层数.背景颜色随机可控
-
Jquery动态改变图片IMG的src地址示例
复制代码 代码如下: <div id="login_1_3a"> <a onfocus=this.blur() href="javascript:void(0)" class="l-button" style="width:80px" onclick='log_1()'> <img onfocus=this.blur() id="img_a" border=0 align=&q
-
使用jQuery动态加载js脚本文件的方法
它们很强大,但有时候也会得不偿失.如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个js文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法.下面就介绍一下如何使用它! 一.jQuery getScript()方法加载JavaScript jQuery内置了一个方法可以加载单一的js文件:当加载完成后你可以在回调函数里执行后续操作.最基本的使用jQuery.getScript的方法是这样: 复制代码 代码如下: jQuery.getScript("/path/t
-
jquery动态分页效果堪比时光网
最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享.分页效果与时光网的差不多. 先在aspx页面放置一个<div class="pageDivs"></div> ,这个是用来存放分页的. 然后建一个page.js文件,具体代码如下(js中用到的css类是自己设置的,这里就不给出了,具体的大家可以自己设置一下css样式): 复制代码 代码如下: $(document).ready(function(){ var pageCount=0;//总页数
-
jquery 如何动态添加、删除class样式方法介绍
取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 复制代码 代码如下: var p_class = $("p").attr("class"); //获取p元素的class [html] 使用attr()方法来设置p元素的class,JQuery代码如下: [code] 1 $("p").attr("'class", "
-
jQuery动态添加删除select项(实现代码)
复制代码 代码如下: // 添加function col_add() { var selObj = $("#mySelect"); var value="value"; var text="text"; selObj.append("<option value='"+value+"'>"+text+"</option>");}// 删除function col_d
-
Jquery选择器中使用变量实现动态选择例子
例子一: <table> <tr> <th>用户名</th> <th>状态</th> <tr> <tr> <td>张三</td> <td data-uid="10000">正常</td> <tr> <tr> <td>李四</td> <td data-uid="10001"
随机推荐
- 详解Angular中$cacheFactory缓存的使用
- SQL SERVER 2008 R2配置管理器出现“远程过程调用失败”(0x800706be)错误提示
- jquery插件开发之选项卡制作详解
- JS编程小常识很有用
- 初识angular框架后的所思所想
- Java对xls文件进行读写操作示例代码
- javascript拖拽应用实例
- javascript闭包传参和事件的循环绑定示例探讨
- PowerShell入门教程之快速学习PowerShell的几个方法
- Lua进阶教程之闭包函数、元表实例介绍
- 在Python操作时间和日期之asctime()方法的使用
- IPv6设置后如何解决MySQL无法连接localhost的问题
- jquery 快速回到页首的方法
- es6的数字处理的方法(5个)
- JS仿iGoogle自定义首页模块拖拽特效的方法
- javascript getElementByTagName的使用
- AndroidStudio 如何使用aar详解
- 三种Web开发主流技术的性价评价
- Android开发自学笔记(二):工程文件剖析
- VLAN 之间的访问控制