zoukankan      html  css  js  c++  java
  • animate基础

    用JQUERY做动画是很方便的,已经看过大牛们做出不逊色于FLASH的各种效果。

    其中的基本功就有animate这个方法的使用。于是,从零开始,训练基本功:

    <body>
    <div class="wrapper" style="500px; height:500px; display:block; margin:0 auto; background:#FFC; position:relative;">
    <div id="txt1">从零开始</div>
    <div id="txt2">掌握基础</div>
    <div id="txt3">不卑不亢</div>
    </div>
    <script>
    最简单的动画:

    $('#txt1').css({position:"absolute",opacity:"0",filter:"alpha(opacity=0)",left:"15px",top:"10px"}); 
    $('#txt2').css({position:"absolute",opacity:"0",filter:"alpha(opacity=0)",left:"25px",top:"40px"});
    $('#txt3').css({position:"absolute",opacity:"0",filter:"alpha(opacity=0)",left:"50px",top:"80px"});
    $('#txt1').animate({left:0+'px',opacity:1}, 500,"swing");
    $('#txt2').delay(200).animate({left:25+'px',opacity:1}, 500,"swing");
    $('#txt3').delay(500).animate({left:50+'px',opacity:1}, 500,"swing");
    $('#txt1').delay(750).animate({left:100+'px',opacity:1}, 500,"swing");
    $('#txt2').delay(1000).animate({left:125+'px',opacity:1}, 500,"swing");
    $('#txt3').delay(1200).animate({left:150+'px',opacity:1}, 500,"swing");
    $('#txt1').delay(1400).animate({left:100+'px',top:100+'px',opacity:1}, 500,"swing");
    $('#txt2').delay(1600).animate({left:125+'px',top:200+'px',opacity:1}, 500,"swing");
    $('#txt3').delay(1800).animate({left:150+'px',top:300+'px',opacity:1}, 500,"swing");
    淡入移动

    今天抽时间搞了一下随机创建这些文字,还没让他们动起来。

            var leafArr=["第一段","第二段","第三段"];
            var leafImgArr=[];
            var innerwrap=document.createElement("div");
                innerwrap.style.position="relative";
                innerwrap.style.display="block";
                innerwrap.id="innerwrap";
                innerwrap.style.left="50%";
                innerwrap.style.top="50%";
            document.getElementById("wrapper").appendChild(innerwrap);    
            for(var i=0;i<15;i++){
                var txt=document.createElement("div");            
                txt.style.position="absolute";
                //alert(getNum(Math.random()*500));
                txt.style.top=getNum(Math.random()*200)+"px";
                txt.style.left=getNum(Math.random()*200)+"px";
                txt.id="txt"+i;
                txt.innerHTML=leafArr[Math.floor(Math.random()*leafArr.length)];
                leafImgArr.push(txt.id);
                document.getElementById("innerwrap").appendChild(txt);
            }
            
        //    floor:返回小于等于其数值参数的最大整数。  %modulo :取余,左边的除以右边的只取余数
            
            
    //自定义方法随机得到正整数或者负整数的!
    
            function getNum(num){
                if(Math.floor(Math.random()*10000)%2==0){
                    return num;
                }else{
                    return -num;//没有负数就会很容易重叠,但是有了负数,绝对定位的时候就会超出  父容器
                }
            }
    随机分布的文字

    </script>

    </body>

  • 相关阅读:
    Flume基础(一):概述
    Hive高级(2):优化(2) 表的优化
    ospf命令
    Verizon 和某 BGP 优化器如何在今日大范围重创互联网
    BGP数据中心鉴别方法
    多线BGP鉴定
    mpls ldp neighbor 和loopbak
    ospf默认路由
    ospf
    ubuntu cloud init获取元数据失败
  • 原文地址:https://www.cnblogs.com/haimingpro/p/3299411.html
Copyright © 2011-2022 走看看