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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
vue.js实现左边导航切换右边内容
Oct 21 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python django生成迁移文件的实例
2019/08/31 Python
实现Python与STM32通信方式
2019/12/18 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
精伦电子Java笔试题
2013/01/16 面试题
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
linux面试题参考答案(3)
2012/09/13 面试题
学校司机岗位职责
2013/11/14 职场文书
忠诚教育心得体会
2014/09/03 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
干部外出学习心得体会
2016/01/18 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
SQL Server中使用表变量和临时表
2022/05/20 SQL Server