如何更改js中疊加div的錨點？

我對使用JS相當陌生，所以請原諒我對我的任何無知。我已經搜索和劇本，但迄今沒有運氣，希望能在這裏找到幫助。我所擁有的是一張帶有4列的桌子，裏面放着圖片。當我將鼠標懸停在圖像上時，透明覆層會從底部滑到頂部，當我退出懸停時，它會向下滑動，並再次完全隱藏。如何更改js中疊加div的錨點？

這是一個JSFiddle。 http://jsfiddle.net/g6xVR/99/

我正在尋找的是覆蓋層保持可見約30px，所以不是錨定在div的最底部，而是會計算底部以上30px的錨點。

這是我使用的代碼。我從javascriptkit中取出它。 http://www.javascriptkit.com/script/script2/divcontentoverlay.shtml

jQuery.noConflict(); 

jQuery.extend(jQuery.easing, {easeOutExpo:function (x, t, b, c, d) { 
     return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 
    } 
}); 

(function($){ 
    $.fn.overlaycontent=function(options) { 
    var setting={id:'', dir:'up', speed:200, opacity:1} 
    return this.each(function(){ 
     $.extend(setting, options, (this.getAttribute('data-overlayid'))? {id:this.getAttribute('data-overlayid')} : {}) 
      var $target=$(this).css({position:'relative', overflow:'hidden'}) 
      var $overlay=$('#'+(setting.id)) 
      var startpoint={} 
      if (setting.dir=="up" || setting.dir=="down"){ 
       startpoint={top:$target.outerHeight() * (setting.dir=="down"? -1 : 1)} 
      } 
      else{ 
       startpoint={left:$target.outerWidth()* (setting.dir=="right"? -1 : 1)} 
      } 
      var overlaydimenions={w:$target.outerWidth()-($overlay.outerWidth()-$overlay.width()), h:$target.outerHeight()-($overlay.outerHeight()-$overlay.height())} 
      $overlay.css($.extend({position:'absolute', zIndex:'1000', width:overlaydimenions.w, height:overlaydimenions.h, left:0, top:20, visibility:'visible'}, startpoint)).appendTo($target) 
      if (setting.opacity<1) 
       $overlay.css({opacity:setting.opacity}) 
      $target.hover(
       function(){ 
        $overlay.dequeue().animate((setting.dir=="up" || setting.dir=="down")? {top:0} : {left:0}, setting.speed, 'easeOutExpo') 
       }, 
       function(){ 
        $overlay.dequeue().animate(startpoint, setting.speed) 
       } 
      ) 
    }) 
    } 
})(jQuery);

任何幫助非常感謝，謝謝！

來源

2014-09-05 RuckFabio

我發現瞭如何改變開始點。取目標的外部高度，然後從中減去，將其固定在我想要的位置。

if (setting.dir=="up" || setting.dir=="down"){ 
       startpoint={top:$target.outerHeight() - 30 * (setting.dir=="down"? -1 : 1)} 
      }

完成的結果。 http://jsfiddle.net/g6xVR/100/

來源

2014-09-05 18:05:07 RuckFabio

如何更改js中疊加div的錨點？

回答

相關問題