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>

  • 相关阅读:
    严重: Parse error in application web.xml file at jndi:/localhost/ipws/WEBINF/web.xml java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml
    Failed to install .apk on device 'emulator5554': timeout解决方法
    java.lang.NoClassDefFoundError:org.jsoup.Jsoup
    Conversion to Dalvik format failed: Unable to execute dex:解决方法
    apache Digest: generating secret for digest authentication ...
    Description Resource Path Location Type Project has no default.properties file! Edit the project properties to set one.
    android service随机自启动
    MVC3 安装部署
    EF 4.3 CodeBased 数据迁移演练
    SQL Server 2008开启sa账户
  • 原文地址:https://www.cnblogs.com/haimingpro/p/3299411.html
Copyright © 2011-2022 走看看