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>

赞 (0)

相关推荐

  • js实现横向百叶窗效果网页切换动画效果的方法

    本文实例讲述了js实现横向百叶窗效果网页切换动画效果的方法.分享给大家供大家参考.具体分析如下: 这是一款很简洁但是效果却不错的网页切换效果,点击新网页后,网页会出现蓝白相间的百叶窗线条自动切换,直到网页全部显示完全.代码如下: 复制代码 代码如下: <html> <head> <title>js网页百叶窗动态切换效果</title> <style> <!-- .intro{ position:absolute; left:0; top:0

  • 图片动画横条广告带上下滚动的JS代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv=

  • 使用requestAnimationFrame实现js动画性能好

    使用requestAnimationFrame实现js动画性能好.先给大家简单介绍下requestAnimationFrame比起setTimeout.setInterval有哪些优势? 示例一: requestAnimationFrame 比起 setTimeout.setInterval的优势主要有两点: 1.requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒6

  • JS 实现列表与多选框选择附预览动画

    JS 实现列表与多选框选择附预览动画

    1功能预览 2html代码 <span> <tr> <td><img onclick="addType()" src="${msUrl}/images/logo/add.png">产品范围:</td> <td><select id="selectTypeOne" class="easyui-combobox" data-options="r

  • window.requestAnimationFrame是什么意思,怎么用

    再看别人实现粒子效果的时候会有以下代码: 复制代码 代码如下: window.requestAnimationFrame || (window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callb

  • js、jquery图片动画、动态切换示例代码

    复制代码 代码如下: <style type="text/css"> #banner { padding: 5px; position: relative; width: 968px; height: 293px; /*border: 1px solid #666;*/ overflow: hidden; font-size: 16px; } #banner_list img { border: 0px; } #banner_bg { margin-bottom: 5px;

  • 缓动函数requestAnimationFrame 更好的实现浏览器经动画

    写缓动函数用到requestAnimationFrame函数,之前了解过一些,但总觉得又不是很了解,所以翻译一篇老外的文章,以便学习分享. requestAnimationFrame是什么? 以前我们做动画需要一个定时器,每间隔多少毫秒就做出一些改变.现在有个好消息:浏览器厂商已经决定提供一个专门做动画的方法,即requestAnimationFrame(),而且基于浏览器的层面也能更好的进行优化.但是呢,这只是一个做动画的基础API,即不基于DOM元素的style变化,也不基于canvas,或

  • js动画效果制件让图片组成动画代码分享

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • JS实现超炫网页烟花动画效果的方法

    本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

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

    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&

  • 原生js实现jquery函数animate()动画效果的简单实例

    通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

  • JS实现回到页面顶部动画效果的简单实例

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS代码如下: //页面加载后触发 window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; //获取页面可视区高度 var clientHeight

  • JQuery实现DIV其他动画效果的简单实例

    1.toggle 切换对象的隐藏和显示,可以用来代替show和hide <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • js实现楼层效果的简单实例

    今天自己写个楼层效果,有一点烦躁,小地方犯错误.各位大神来修改不足啊!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>楼层切换</title> <style> *{padding: 0;margin: 0;} li{list-style: none;} .main img{width:

  • jQuery实现动画效果的简单实例

    jQuery实现动画效果的简单实例

    一.需求原因目前jQuery已经是一个比较成熟的框架了,而且基于他的插件也有上百种,本例我手动用jQuery实现一个动画效果的例子. 二.具体实现 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv

  • JS实现选项卡效果的代码实例

    选项卡这个效果估计以后的项目会经常涉及到,对代码还是半熟练的情况下还是写下来吧. 先来布局一个简单的页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} #box

  • js实现动画特效的文字链接鼠标悬停提示的方法

    本文实例讲述了js实现动画特效的文字链接鼠标悬停提示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

  • 微信小程序实现循环动画效果

    在微信小程序的交互效果中,通常通过各种动画效果来增强用户体验,本文通过微信小程序原生API来实现小程序中控件的各种动画效果,先看下本文最终的效果: 上图中的"关注公众号"动画就是我们要实现的效果. 为了实现上文中的效果,我们首先来看一下微信小程序关于动画的官方API 微信官方API学习 wx.createAnimation(OBJECT) 说明:创建一个动画实例animation.调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画

  • js定时器+简单的动画效果实例

    1.向下滑动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>向下滑动</title> <style> body { margin: 0px; } #show { width: 200px; /* 高度为 0 */ height: 100px; background-color: lightc

随机推荐