Question

我正在构建一个照片库，并且根据要求，当鼠标滑过缩略图图像时，缩略图的一个小放大版本，其中包含实际图像的标题，大小等详细信息。需要显示在放大的图像。注意 - 放大的图像仅在翻转时显示，并在鼠标移出缩略图图像区域时立即消失。我知道这是大多数照相馆网站中非常常见的功能，雅虎图片搜索就是一个很好的例子（参见：Yahoo Image Search）

基本上，根据要求，代码需要在Javascript中构建，而不使用任何像Jquery这样的库。所以在核心JS中，翻转应该有效。

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

此外，如何设计翻滚时弹出的“新页面”（好吧，不是一个新页面，只是一个不显眼的弹出窗口）？

非常感谢任何关于如何去做的指示。注意 - 我知道库缓解了这个问题，但正如我所说，它需要在核心JS中完成，即使淡入/淡出看起来很粗糙。

谢谢！

Answer 1

没有第三方库或Ajax的简单，直接的实现。这远非生产质量，但可能有助于您入门。

主要的“技巧”是，图像位于容器中，具有CSS“溢出：隐藏”......然后当您翻转时，设置CSS以便显示溢出（例如通过更改classname）...此外，类名的更改也显示了一直嵌入页面的附加信息，但在...之前设置为“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>

Answer 2

您可以使用AJAX请求页面并附加到当前页面上的div，其中css样式位置为绝对或相对。我将这种方法用于我的一个画廊。

onmouseover，将触发GetPhoto（）;切换（'photo'）; style（'photo'）;
- GetPhoto（）会ajax到文件中有照片或照片本身，并将其隐藏在id =“photo”DIV中。
- toggle（）会将id =“photo”DIV标记的可见性切换为可见
- style（）会将id =“photo”DIV标记的位置切换为固定位置。

配置：更改

中的文件

xmlhttp.open（ “GET”， “YOUR.PAGE.php”，TRUE）;

到您将使用的文件的名称。

<div id="photo" style="position: absolute; visibility: hidden;"></div>
    <script>
//<![CDATA[
        function GetPhoto(){
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            // clear element first so it can be reused.
            document.getElementById("photo").innerHTML='';
            document.getElementById("photo").innerHTML=xmlhttp.responseText;
            }

          };
          xmlhttp.open("GET","YOUR.PAGE.php",true);
          xmlhttp.send();          
        }
function toggle(obj) {
    var item = document.getElementById(obj);
    if (item.style.visibility == 'visible') {
        item.style.visibility = 'hidden';    
     }
    else {
        item.style.visibility = 'visible';
     }
}
function style(obj) {
    var item = document.getElementById(obj);
    if (item.style.position == 'fixed') { item.style.position = 'absolute'; }
    else { item.style.position = 'fixed'; }
}
//]]>
    </script>
<button onmouseover="GetPhoto(); toggle('photo'); style('photo');" onmouseout="toggle('photo'); style('photo');">Mouse Over Object</button>

Answer 3

您可以使用具有绝对定位的div作为容器来显示放大版本。根据x和amp设置div的“左”和“顶”。缩略图的y。要计算div的位置，您可以使用窗口的高度和宽度。宽度并检查是否

[width of pop-up div] + [left of the div] < [width of the window]

高度也可以做类似的事情。

如何在设计缩略图图像的翻转时显示弹出窗口？ Javascript，CSS

3 个答案: