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 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 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安全编程之加密功能
2006/10/09 PHP
桌面中心(三)修改数据库
2006/10/09 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
Dojo 学习要点
2010/09/03 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
JQuery球队选择实例
2015/05/18 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
国家助学金获奖感言
2014/01/31 职场文书
社团活动总结报告
2014/06/27 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
导游词开场白
2015/01/31 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
python中的装饰器该如何使用
2021/06/18 Python