js螺旋动画效果的具体实例
更新时间：2013年11月15日 16:33:38 作者：
这篇文章主要介绍了js螺旋动画效果的具体实例，有需要的朋友可以参考一下
复制代码 代码如下:
<!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>
相关文章
这篇文章主要给大家介绍了关于JavaScript算法题之如何将一个数组旋转k步的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了JavaScript中用字面量创建对象介绍,本文直接给出代码实例,并讲解了一些技巧,需要的朋友可以参考下2014-12-12
这篇文章主要为大家介绍了JavaScript之instanceof方法手写示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了JS脚本实现动态给标签控件添加事件的方法,结合实例形式分析了javascript添加事件监听的相关实现技巧,需要的朋友可以参考下2016-06-06
把网站设置为浏览器的首页是我们做网站时经常加到网站顶部的功能！下面这段代码是强制设置为首页的代码！最好别用啊！呵呵！2009-01-01
这篇文章主要介绍了electron实现qq快捷登录的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
JavaScript实现擦玻璃效果分析鼠标移动响应时间粒度问题
这篇文章主要为大家介绍了JavaScript实现擦玻璃效果分析鼠标移动响应时间粒度问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
下面小编就为大家带来一篇js eval函数使用,js对象和字符串互转实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了js 图片懒加载的实现，帮助大家更好的优化自身网页，提高网页响应速度，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了JavaScript 匿名函数和闭包介绍,需要的朋友可以参考下2015-04-04
最新评论