码迷,mamicode.com
首页 > 其他好文 > 详细

左右悬浮

时间:2014-11-25 12:13:59      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   sp   on   div   log   

(function($) {
  $.fn.sideFixed = function(options) {
    var opts = $.extend(true, {},
    $.fn.sideFixed.defaults, options);
    return this.each(function() {
      var $this = $(this);
      $this.on("mouseenter",function() {
    $(".mask").stop().animate({opacity:0.4});
    $(".mask").show();
    $(".mask").css({
        width:$(document).outerWidth(),
        height:$(document).outerHeight()
    });
    if(opts.direction==="right"){
    $(this).stop().animate({
        right:"0px"
    },800);
    }else if(opts.direction==="left"){
        $(this).stop().animate({
        left:"0px"
    },800);
    }
      }).on("mouseleave",function() {
        $(".mask").stop().fadeOut(800);     
        $(".mask").stop().animate({opacity:0},function(){$(".mask").hide();});
        if(opts.direction==="right"){
        $(this).stop().animate({
            right:-$(this).width()
        });
        }else if(opts.direction==="left"){
            $(this).stop().animate({
            left:-$(this).width()
        });
        }
      });
    });
  };
  $.fn.sideFixed.defaults = {
      direction:"left"
};
})(jQuery);

 

左右悬浮

标签:style   blog   io   ar   color   sp   on   div   log   

原文地址:http://www.cnblogs.com/dingyuanxin/p/4120358.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!