javascript - 如何设计缩略图翻转时显示的弹出窗口？ Javascript, CSS-6ren

javascript - 如何设计缩略图翻转时显示的弹出窗口？ Javascript, CSS

转载作者：行者123 更新时间：2023-11-29 20:14:24

我正在建立一个照片库，根据要求，当鼠标在缩略图上滚动时，需要显示一个略微放大的缩略图，其中包含实际图像的标题、大小等详细信息。放大的图像。注意-放大图像仅在滚动时显示，当鼠标移出缩略图区域时会立即消失。我知道这是大多数图片库网站中非常常见的功能，Yahoo Image Search 就是一个完美的例子(参见:Yahoo Image Search)

基本上，根据要求，代码需要在 Javascript 中构建，而不使用任何库(如 Jquery)。所以在核心 JS 中，翻转应该起作用。

我知道 onmouseover 可以做到这一点，但我的问题是如何确保适当显示放大的图像(例如，在有足够空间可用时显示在缩略图的右侧，否则显示在左侧/上方/缩略图的顶部，因为间距约束可能是？

此外，鼠标悬停时弹出的“新页面”是如何设计的(好吧，不完全是新页面，只是一个不显眼的弹出窗口)？

非常感谢任何有关如何进行的指示。注意 - 我知道库简化了这件事，但正如我所说，它需要在核心 JS 中完成，即使淡入/淡出看起来很粗糙。

谢谢!

最佳答案

没有第 3 方库或 Ajax 的简单、直接的实现。这与生产质量相去甚远，但可能会帮助您入门。

主要的“技巧”是，图像位于一个容器中，该容器具有 CSS“overflow:hidden”...然后当您翻转时，您设置 CSS 以显示溢出(例如通过更改类名)...此外，类名的更改还会显示附加信息，这些信息一直嵌入到页面中，但之前设置为“display:none”...

希望这对您有所帮助。

<html>
    <head>
        <style>
            .container{
                position: relative;
                display:block;
                width: 150;
                height: 150px;
                float:left;
                margin:5px;
                z-index: 1;
            }

            .container .popup{
                position: absolute;
                display:block;
                width: 150;
                height: 150px;
                overflow: hidden;
                z-index: 1;
            }

            .container img{
                position:relative;
            }

            .container .footer{
                display:none;
            }

            .containerOpen{
                position: relative;
                display:block;
                width: 150;
                height: 150px;
                float:left;
                margin:5px;
                 z-index: 20000;
            }

            .containerOpen .popup{
                position: absolute;
                display:block;
                padding: 5px;
                overflow: visible;
                background: #ff0000;
                z-index: 10000;
            }
            .containerOpen img{
                position:relative;
                left: 0px !important;
                top: 0px !important;
            }

            .containerOpen .footer{
                display:block;
                background:#cccccc;
                padding:10px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="popup">
                <img src="http://ts3.mm.bing.net/images/thumbnail.aspx?q=1290129900246&id=6bfb5f7543719fe92db9edb864a8ea90" />
                <div class="footer">
                    Additional Information goes here.
                </div>
            </div>
        </div>
        <div class="container">
            <div class="popup">
                <img src="http://ts3.mm.bing.net/images/thumbnail.aspx?q=1262145976094&id=358c632c2a4025e850b559ccf1778dff" />
                <div class="footer">
                    Additional Information goes here.
                </div>
            </div>
        </div>
        <div class="container">
            <div class="popup">
                <img src="http://ts2.mm.bing.net/images/thumbnail.aspx?q=1311373591873&id=6c6770a9c21d648841bbd3c47324d848" />
                <div class="footer">
                    Additional Information goes here.
                </div>
            </div>
        </div>

        <script type="text/javascript">
            document.getElementsByClass = function(classname){
                var itemsfound = [];
                var elements = document.getElementsByTagName('*');
                for(var i=0; i<elements.length; i++){
                    if(elements[i].className == classname){
                        itemsfound.push(elements[i]);
                    }
                }
                return itemsfound;
            }

            window.onload = function () { 
                var containers = document.getElementsByClass('container');
                for (var i in containers){
                    var elContainer = containers[i];
                    var elPopup = elContainer.children[0];
                    var elImg = elPopup.children[0];
                    var elFooter = elPopup.children[1];
                    var width = elImg.offsetWidth;
                    var height = elImg.offsetHeight;
                    var thumbWidth = 150;
                    var thumbHeight = 150;
                    var offsetX = "left:-" + Math.round(0.5*(width-thumbWidth)) + "px; ";
                    var offsetY = "top:-" + Math.round(0.5*(height-thumbHeight)) + "px; ";
                    elImg.setAttribute("style", offsetX + offsetY );

                    elContainer.onmouseover = function(){
                        this.className = 'containerOpen';
                    }

                    elContainer.onmouseout = function(){
                        this.className = 'container';
                    }
                }
            }       
        </script>
    </body>
</html>