Question

我是使用JS的新手，所以请原谅我可能有的任何无知。我已经搜索并玩过剧本，但到目前为止没有运气，并希望在这里找到帮助。我所拥有的是一个包含4列的表格，其中包含图像。当我将鼠标悬停在图像上方时，透明覆盖层会从底部滑动到顶部，当我退出悬停时，它会向下滑动，并再次完全隐藏。

这是一个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);

非常感谢任何帮助，谢谢！

Answer 1

我发现了如何改变起点。取目标的外部高度，然后从中减去，将其锚定在我想要的位置。

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

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

如何在js中更改叠加div的锚点？

1 个答案: