0

我必须在图像上箭头以导航到上一个或下一个图像。箭头的 div 没有背景颜色。当我单击该框时，会显示一个警报。这在整个 div 上都是可能的。当图像显示在带有箭头的 div 下时，单击在 Internet Explorer 中不起作用，但在 Firefox 和 Chrome 中起作用。用户无法导航到下一个或上一个图像。当您为带有箭头的框提供背景颜色时，它确实有效，但您将无法看到图像。

有人能帮帮我吗？下面是一个可以立即运行的示例项目。

谢谢！

<div id="photoViewer">     
        <div id="photoViewerDialog" class="photoViewerWindow">
            <div id="photoViewerImageCon">
                <img src="../../Content/ShowImage.jpg" class="image" alt="photo" />
                <div id="navigationBar">
                    <div id="navigationLeft"><span><</span></div>
                    <div id="navigationRight"><span>></span></div>
                </div>
            </div>
        </div>

        <div id="photoViewerMask"></div>    
    </div>

<script type="text/javascript">
        $(document).ready(function () {
            //transition effect     
            $('#photoViewerMask').fadeIn();
            $('#photoViewerMask').fadeTo("slow", 0.8);

            //Get the window height and width
            var winH = $(window).height();
            var winW = $(window).width();

            var borderSpace = 200;
            var minimumSize = 520;

            //Set width and height of photoviewer
            if (winW > minimumSize) {
                if ((winW - borderSpace) > minimumSize) {
                    $('#photoViewer .photoViewerWindow').css('width', winW - borderSpace);
                }
                else {
                    $('#photoViewer .photoViewerWindow').css('width', minimumSize);
                }
            }
            if (winH > minimumSize) {
                if ((winH - borderSpace) > minimumSize) {
                    $('#photoViewer .photoViewerWindow').css('height', winH - borderSpace);
                }
                else {
                    $('#photoViewer .photoViewerWindow').css('height', minimumSize);
                }
            }

            var photoViewerWindow = $('#photoViewer .photoViewerWindow');
            var imageCon = $('#photoViewer .photoViewerWindow #photoViewerImageCon');
            var infoCon = $('#photoViewer .photoViewerWindow #photoViewerInfoCon');
            var infoHeader = $('#photoViewer .photoViewerWindow #photoViewerInfoCon #photoViewerInfoHeader');
            var InfoThumbs = $('#photoViewer .photoViewerWindow #photoViewerInfoCon #photoViewerInfoThumbs');

            //Set width and line-height of photo to show
            $(imageCon).width($(photoViewerWindow).width() - $(infoCon).width());
            $(imageCon).css('line-height', $(photoViewerWindow).height() + 'px');

            //Set the popup window to center
            $('#photoViewerDialog').css('top', winH / 2 - $('#photoViewerDialog').height() / 2);
            $('#photoViewerDialog').css('left', winW / 2 - $('#photoViewerDialog').width() / 2);

            //transition effect
            $('#photoViewerDialog').fadeIn();
        });

        $('#navigationLeft').click(function () {
            alert('left');
        });

        $('#navigationRight').click(function () {
            alert('right');
        });

    </script>

CSS

    #photoViewerMask {
    position:absolute;
    z-index:9000;
    background-color:#000000;
    top: 0;
    width: 100%;
    height: 100%;
    }

   #photoViewer .photoViewerWindow {
    position:fixed;
    min-width:520px;
    min-height:520px;
    max-height: 2048px;    
    z-index:9001;
    }

   #photoViewer .photoViewerWindow #photoViewerImageCon {
    display: block;
    float: left;
    height: 100%;
    max-height: 2048px;
    position: relative;
    z-index: 9003;
    text-align: center;
    background-color: Black;
    }

   #photoViewer .photoViewerWindow #photoViewerImageCon .image {
    vertical-align: middle;
    z-index: 9003;
    }

   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationBar {
    position: absolute;
    top: 0;    
    left: 0;
    width: 100%;
    height: 100%;
    }

   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft,
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight {
    color: rgb(255, 255, 255);
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    font-size: 4em;
    position: absolute;
    z-index: 9910;
    top: 0;
    height: 100%;
    cursor: pointer;
    }

   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft:hover,
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight:hover {
    color: rgb(255, 255, 255);
   }

   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft
   {
    /*background-color:Aqua;*/
    width: 20%;
    left: 0px;
   }
   
   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationLeft span
   {
    position: absolute;
    left: 20px;
   }

   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight
   {
    /*background-color:Fuchsia;*/
    width: 80%;
    right: 0px;
   }

   #photoViewer .photoViewerWindow #photoViewerImageCon #navigationRight span
   {
    position: absolute;
    right: 20px;
   }
4

3 回答 3

0

您似乎使用了很多 z-index，这可能是您的问题。尝试更改您的#navigationRight 跨度和#navigationLeft 跨度以获得更好的z-index，因为您的“跨度”可能会阻止该区域的“点击”功能。

这让我在不同的情况下多次陷入困境。

于 2014-03-10T00:31:36.787 回答
0

不需要透明图像的解决方案：使用足够大以至于在您的 div 中不可见的文本 - 这是一个示例：

.my_clickable_div:after {
   content: '____________________________';
   font-size: 1000px;
   overflow: hidden;

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

因为这个问题已经在 IE9 中解决了，所以你可以把它放在一个条件 CSS 中，它将为旧的 IE 版本加载，如下所示：

<!--[if lt IE 9]><link rel='stylesheet' type='text/css' href='ie_old.css'/><![endif]-->

我希望这有帮助 ！

于 2013-03-15T11:08:58.470 回答
0

可以肯定的是，制作一个 1x1 透明 gif 并将其用作 div 的背景图像。这个技巧（是吗？）来自过去。

于 2012-06-15T19:16:05.050 回答