Question

我遇到了一个我最近制作的脚本问题。我们的想法是让图像跟随鼠标，但不要超出屏幕。 http://nemanjamilosavljevic.com/javascript/gallery_view

首次加载页面时，它不会计算元素的尺寸，但刷新页面时会计算它们。元素不会立即显示在页面上，因为需要计算的内容是弹出窗口。我已经尝试过立即显示它们，但它仍然没有做到这一点。

以下是我正在使用的代码：

.popup-image-cnt {
    display:none; 
    position:fixed; 
    z-index:10;
    border:2px solid #fff;
    box-shadow:0 0 15px rgba(0,0,0,.7);
}
.popup-image-cnt img {display:block;}

标记：

<ul id="fnc-preview-this-design">
    <li><a href="#" rel="gallery/1-3.jpg"><img src="gallery/1-1.jpg" /></a></li>
    <li><a href="#" rel="gallery/2-3.jpg"><img src="gallery/2-1.jpg" /></a></li>
    <li><a href="#" rel="gallery/3-3.jpg"><img src="gallery/3-1.jpg" /></a></li>
</ul>

包括：

<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="jquery/jquery-gallery-view-1.0.0.js"></script>
<script type="text/javascript">   
    $(document).ready(function() {
        gallery_popup({
            actionElement: '#fnc-preview-this-design a'
    }); 
});
</script>

图库弹出式脚本：

function gallery_popup (elementsObj){
    $(window).load(function(){
        // Define a screen's bottom position
        var bottomPosition = $(window).height() + $(document).scrollTop();

        // Define a screen's right position
        var sidePosition = $(window).width();

        // Generate popup images for every item that is needed
        $(elementsObj.actionElement).each(function (i) {
            // Append
            var image     = $(this),
            originalSrc = image.attr('rel');

            $(this).append('<span class="popup-image-cnt"><img src="' + originalSrc + '" alt="" /></span>');

            // Calculate images width and height after it is added and loaded
            var imgH = $(this).children('.popup-image-cnt').height();
            var imgW = $(this).children('.popup-image-cnt').width();

            $(this).bind('mousemove', function(e){
                // Define a position where the images bottom side is
                var mouseYPosLimiter = Math.round(parseFloat(e.pageY) + parseFloat(imgH));

                // Define a position where the images right side is
                var mouseXPosLimiter = Math.round(parseFloat(e.pageX) + parseFloat(imgW));

                // See if it fits vertically, and if it doesn't, stick it to the bottom
                if (mouseYPosLimiter > bottomPosition) {
                    var topPos = bottomPosition - imgH - 4
                } else {
                    var topPos = e.pageY + 20
                }

                // See if it fits horizontally, and if it doesn't, stick it to the right
                if (mouseXPosLimiter > sidePosition) {
                    var sidePos = sidePosition - imgW - 4
                } else {
                    var sidePos = e.pageX + 10
                }

                // Move the popup along with the mouse
                $('.popup-image-cnt').offset({
                   left:  sidePos,
                   top:   topPos
                });

            });

            // mouse action
            $(this).mouseenter(function() {
                // Show the popup
                $(this).children('.popup-image-cnt').fadeIn('fast');
            });

            $(this).mouseleave(function() {
                // Hide the popup
                $(this).children('.popup-image-cnt').fadeOut('fast');
            });

        });        
    });    
}

为什么需要刷新页面才能计算元素尺寸

0 个答案: