zoukankan      html  css  js  c++  java
  • 7,动画效果

    推荐的学习资源来自:张子秋http://www.cnblogs.com/zhangziqiu/tag/jQuery%e6%95%99%e7%a8%8b/

    概要:

           动画,特效

    内容:

    一个web弹出层实例:

           思路:

    1. 弹出层的位置需要动态计算. 因为触发弹出事件的对象可能出现在页面的任何位置, 比如截图中的位置.

    2. 为document绑定单击是关闭弹出层的函数, 要使用多播委托, 否则可能冲掉其他人在document绑定的函数.

    3. 为document绑定了关闭函数后, 需要在显示函数中取消事件冒泡, 否则弹出层将显示后立刻关闭.

               <scripttype="text/javascript">

           $(document).ready(function () {

               //动画速度

               var speed = 500;

               //绑定事件处理

               $("#btnShow").click(function (event) {

                    //取消事件冒泡

                    event.stopPropagation();

                    //设置弹出层位置

                    var offset =$(event.target).offset();

                    $("#divPop").css({top: offset.top + $(event.target).height() + "px", left: offset.left});

                    //动画显示

                   $("#divPop").show(speed);

               });

               //单击空白区域隐藏弹出层

               $(document).click(function(event) { $("#divPop").hide(speed) });

               //单击弹出层则自身隐藏

               $("#divPop").click(function (event) {$("#divPop").hide(speed) });

           });

       </script>

    基本动画函数:

           Show():显示匹配元素

           Show(speed,[callback]):show(600)用时600毫秒显示

           Hide():隐藏

           Hide(speed,[callback]):hide(“slow”)

           Toggle():切换为隐藏/显示

    Toggle(switch): $("p").toggle( flip++ % 2 == 0 );为true

     调用show,

    false调用hide

    Toggle(speed,[callback]):$(“p”).toggle(“fast”,function(){alert(“aa”)})用200毫秒,完

    成后显示对话框

    滑动动画效果:sliding

           Sildedown(speed,[callback]):向下滑

           Sildeup(speed,[callback]):

           Sildetoggle(speed,[callback]):

    淡入淡出函数:fading

           Fadein(speed,[callback]):

           Fadeout(speed,[callback]):

           FadeTo(speed,opacity,[callback]):

                  $(“p”).fadeTo(“slow”,0.66):用600毫秒,将段落透明度调整到2/3可见度

    自定义动画:custom

           Animate(params,[duration],[easing],[callback]):

           Animate(params,options)

           Stop([cleatQueue],[gotoEnd])

           参考手册

    例子:

           掉落消失的动画:

                  $(document).ready(function() {

               $("#divPop")

               .animate(

               {

                    "opacity":"hide",

                    "top":$(window).height() - $("#divPop").height() –

    $("#divPop").position().top

               },

               600,

               function () { $("#divPop").hide(); }

               );

           });

           自定义消散:

                  $(document).ready(function() {

               $("#divPop")

               .animate(

               {

                    "opacity":"hide",

                    "width":$(window).width() - 100,

                    "height":$(window).height() - 100

               },

               500

               );

           });

    全局控制属性:

           jQuery.fx.off返回值Boolean,关闭页面上所有动画

           true立即关闭所有动画,设为false后可以重新开启所有动画

  • 相关阅读:
    ORA00257 archiver error. 错误的处理方法
    Eclipse快捷键大全
    struts2 globalresults
    oracle创建表空间
    struts2 action中result参数详解
    struts2小程序登录验证
    清理系统垃圾文件 请命名为:*.bat
    网上免费阅读的计算机编程书籍列表
    eclipse+myeclipse+mysql+tomcat配置数据源
    o(∩_∩)o...哈哈 somethingaboutJAVA
  • 原文地址:https://www.cnblogs.com/yaoge/p/1820179.html
Copyright © 2011-2022 走看看