当前位置：文江博客话题详情

jQuery Overlay 中的效果

发布于 2024-12-24 02:21:59 字数 158 浏览 3 评论 0原文

谁能说一下，jQuery工具Overlay中有多少种效果，它们是什么？我在此链接中搜索效果列表，没有显示任何内容。谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泪痕残 2024-12-31 02:21:59

看看这个链接以获得解释，无论如何我都会复制并粘贴到这里

自定义叠加效果自定义叠加效果是通过
$.tools.overlay.addEffect 方法。第一个参数是效果
名称，第二个参数是定义如何覆盖的函数
显示，第三个参数定义覆盖层如何关闭。里面
该变量是对覆盖 API 的引用。
加载函数接收两个参数。第一个参数 css
定义配置中给出的顶部和左侧属性。这
第二个参数是回调函数，必须在您之后调用
已经执行了你的加载效果。

// loading animation
$.tools.overlay.addEffect("drop", function(css, done) { 

   // use Overlay API to gain access to crucial elements
   var conf = this.getConf(),
       overlay = this.getOverlay();           

   // determine initial position for the overlay
   if (conf.fixed)  {
      css.position = 'fixed';
   } else {
      css.top += $(window).scrollTop();
      css.left += $(window).scrollLeft();
      css.position = 'absolute';
   } 

   // position the overlay and show it
   overlay.css(css).show();

   // begin animating with our custom easing
   overlay.animate({ top: '+=55',  opacity: 1,  width: '+=20'}, 400, 'drop', done);

   /* closing animation */
   }, function(done) {
      this.getOverlay().animate({top:'-=55', opacity:0, width:'-=20'}, 300, 'drop', function() {
         $(this).hide();
         done.call();      
      });
   }
);

Take a look at this link for an explanation, in any case i copy and paste here

Custom Overlay effect Custom overlay effects are done with the
$.tools.overlay.addEffect method. The first argument is the effect
name, the second argument is the function that defines how the overlay
is shown and the third argument defines how the overlay closes. Inside
the functions the this variable is a reference to the overlay API.
The loading function receives two arguments. The first argument css
defines the top and left properties given in the configuration. The
second argument is a callback function that must be called after you
have performed your loading effect.

// loading animation
$.tools.overlay.addEffect("drop", function(css, done) { 

   // use Overlay API to gain access to crucial elements
   var conf = this.getConf(),
       overlay = this.getOverlay();           

   // determine initial position for the overlay
   if (conf.fixed)  {
      css.position = 'fixed';
   } else {
      css.top += $(window).scrollTop();
      css.left += $(window).scrollLeft();
      css.position = 'absolute';
   } 

   // position the overlay and show it
   overlay.css(css).show();

   // begin animating with our custom easing
   overlay.animate({ top: '+=55',  opacity: 1,  width: '+=20'}, 400, 'drop', done);

   /* closing animation */
   }, function(done) {
      this.getOverlay().animate({top:'-=55', opacity:0, width:'-=20'}, 300, 'drop', function() {
         $(this).hide();
         done.call();      
      });
   }
);

回复收藏 0 原文