js螺旋动画效果的具体实例


Posted in Javascript onNovember 15, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">  
<title>Spiral</title>  
<script type="text/javascript" src="js/jquery-1.5.js"></script>  
</head>  
<body>  
<script type="text/javascript">  
var Spiral;  
var yjq;  
(function(){  
    yjq = function(name,turns,duration,frame,count,decrease_time){  
        $('style.enable_remove').remove();  
        $('[id^=test]').css({'position':'absolute','width':10,'height':10,'top':300,'left':300,'background':'black'});  
        Spiral(name+'1',600,300,300,300,turns,duration,frame);  
        Spiral(name+'2',300,0,300,300,turns,duration,frame);  
        Spiral(name+'3',0,300,300,300,turns,duration,frame);  
        Spiral(name+'4',300,600,300,300,turns,duration,frame);  
        $('#'+name+'1').css({"-webkit-animation":name+"1 "+duration+"ms linear "+count});  
        $('#'+name+'2').css({"-webkit-animation":name+"2 "+duration+"ms linear "+count});  
        $('#'+name+'3').css({"-webkit-animation":name+"3 "+duration+"ms linear "+count});  
        $('#'+name+'4').css({"-webkit-animation":name+"4 "+duration+"ms linear "+count});  
        var arg = arguments;  
        $("#"+name+"4").one('webkitAnimationEnd',function(){  
            if(duration<=0){  
                return;  
            }  
            arg.callee(name,turns,duration-=decrease_time,frame,count,decrease_time);  
        });  
    }  
    Spiral = function(name,w1,h1,w2,h2,N,T,frame){  
        var interval = T/frame;//每帧间隔  
        var n;//圈数  
        var i = 0;  
        var k;//初始象限  
        var R = Math.sqrt(Math.pow(w2-w1,2)+Math.pow(h2-h1,2),2);//半径  
        var style="@-webkit-keyframes "+name+"{";  
        var styleDom=$("<style class='enable_remove'></style>");  
        if(w1>w2 && h1<=h2){  
            k = 1;  
        }else if(w1<=w2 && h1<h2){  
            k = 2;  
        }else if(w1<w2 && h1>=h2){  
            k = 3;  
        }else {  
            k = 4;  
        }  
        for(var t=0;t<T;t+=interval){  
            var t1 = t%(T/N);  
            n = Math.floor(t/(T/N));  
            x = h2-R*(1-t1/T-n/N)*Math.cos(2*Math.PI*t1*N/T+Math.pow(-1,k)*Math.atan(Math.abs(w2-w1)/Math.abs(h2-h1))+(k>2?1:0)*(k%2?-1:1)*Math.PI);  
            y = w2-R*(1-t1/T-n/N)*Math.sin(2*Math.PI*t1*N/T+Math.pow(-1,k)*Math.atan(Math.abs(w2-w1)/Math.abs(h2-h1))+(k>2?1:0)*(k%2?-1:1)*Math.PI);  
            style+=(i++)*100/frame+'%{top:'+x+'px;left:'+y+'px;} ';  
        }  
        style+='100%{top:'+w2+'px;left:'+h2+'px;}}';  
        styleDom.html(style);  
        $("head").append(styleDom);  
    };  
})();  
$(function(){  
    var name = 'test';  
    var turns = 5;//旋转圈数  
    var duration = 2000;//子动画耗时  
    var decrease_time = 100;//每次子动画耗时减少量  
    var frame = 1000;//子动画帧数  
    var count = 2;//子动画执行次数  
    yjq(name,turns,duration,frame,count,decrease_time);  
});  
</script>  
<div id="test1"></div>  
<div id="test2"></div>  
<div id="test3"></div>  
<div id="test4"></div>  
</body>  
</html> 

js螺旋动画效果的具体实例

js螺旋动画效果的具体实例

js螺旋动画效果的具体实例

js螺旋动画效果的具体实例

Javascript 相关文章推荐
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
js中有关IE版本检测
Jan 04 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
Javascript实现字数统计
Jul 03 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 #Javascript
JS读取XML文件示例代码
Nov 15 #Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 #Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 #Javascript
jQuery Form 页面表单提交的小例子
Nov 15 #Javascript
js简单实现用户注册信息的校验代码
Nov 15 #Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 #Javascript
You might like
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
React实现全选功能
2020/08/25 Javascript
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
有创意的广告词
2014/03/18 职场文书
求职信结尾怎么写
2014/05/26 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
大学校园招聘会感想
2015/08/10 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
win sever 2022如何占用操作主机角色
2022/06/25 Servers
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers