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

网络编程 2024/5/19 佚名

3 2 1

复制代码代码如下:
<!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="/UploadFiles/2021-04-02/jquery-1.5.js"></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,螺旋动画

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“js螺旋动画效果的具体实例”

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

暂无“js螺旋动画效果的具体实例”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240519

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

js,螺旋动画

jquery实现图片灯箱明暗的遮罩效果

简单实用的反馈表单无刷新提交带验证

评论“js螺旋动画效果的具体实例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接