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

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

<body>
<div class="wrapper" style="width: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>

animate基础的更多相关文章

  1. 超级强大的SVG SMIL animation动画详解

    本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...

  2. [转]超级强大的SVG SMIL animation动画详解

    超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...

  3. jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

  4. animate动画基础

    定义: animate() 方法执行 CSS 属性集的自定义动画. 1.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果. 2.只有数字值可创建动 ...

  5. Swift基础之UIPickerView和小animate的使用

    写一个简单的UIPickerView的使用Demo,比较简单,其中和一个小动画的结合使用 UIPickerView的使用基本上跟OC语言中的一样,就是写法的样式问题,想必开发过OC的应该不需要多讲了, ...

  6. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  7. JavaScript ： 零基础打造自己的类库

    写作不易,转载请注明出处,谢谢. 文章类别:Javascript基础(面向初学者) 前言 在之前的章节中,我们已经不依赖jQuery,单纯地用JavaScript封装了很多方法,这个时候,你一定会想, ...

  8. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  9. 基础2.Jquery过滤选择器

                         1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的 ...

随机推荐

  1. [RxJS] Filtering operators: skipWhile and skipUntil

    After takeUntil() and takeWhile() function, let's have a look on skipWhile() and skilUntil() functio ...

  2. Android性能优化典范 - 第5季

    这是Android性能优化典范第5季的课程学习笔记,拖拖拉拉很久,记录分享给大家,请多多包涵担待指正!文章共10个段落,涉及的内容有:多线程并发的性能问题,介绍了AsyncTask,HandlerTh ...

  3. Java基础知识强化之集合框架笔记44：Set集合之TreeSet保证元素唯一性和自然排序的原理和图解

    1. TreeSet保证元素唯一性和自然排序的原理和图解 2. TreeSet唯一性以及有序性底层剖析: 通过观察TreeSet的add()方法,我们知道最终要看TreeMap的put()方法. 跟踪 ...

  4. WKWebView使用过程中的那些坑

    问题产生背景: 新开发的页面中有一部分的界面是需要展示后端接口返回的HTML代码,包括文字和图片.所以就自然而然的要使用iOS原生的WebKit. 鉴于Xcode 8发布以后,编译器支持的最低版本(D ...

  5. 织梦dede编辑器ckeditor如何添加中文字体不乱码

    dedecms内容编辑器ckeditor没有中文字体,找了很多教程都是千篇一律,而且都是错的,终于找到了一篇,结合自己的实际操作,来教您如何添加中文字体,并且解决乱码问题.   工具/原料 dedec ...

  6. Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出，并进行前段验证

    1.新建Controller public ActionResult Index() { return View(); } public ActionResult Person(int? id) { ...

  7. php输出echo、print、print_r、printf、sprintf、var_dump的区别比较

    本篇文章是对php输出echo.print.print_r.printf.sprintf.var_dump的区别进行了详细的分析介绍,需要的朋友参考下     用.net开发已经5年了,最近突然想接触 ...

  8. SGU 231.Prime Sum

    题意: 求有多少对质数(a,b)满足a<=b 且a+b也为质数.(a+b<=10^6) Solution: 除了2之外的质数都是奇数,两个奇数的和是偶数,不可能是质数.所以题目就是求差为2 ...

  9. Jquery实现图片左右滚动（自动）

    <!DOCTYPE HTML><html><head><title>基于jQuery的控制左右滚动效果_自动滚动版本</title>< ...

  10. SQL Server的事务处理与高级查询

    6.高级查询与脚本 6.1子查询 位于SELECT查询中的SELECT查询. 6.11 标量表达式 select id,val,val-(select avg(val) from tbltest) f ...