Question

我想要的是相当简单的，我有两个例子：

在查看这些投资组合网站时，您会看到它主要依赖于图像的基于滚动的网站。我正在寻找的交互性是点击图像，在网页上产生“悬停”元素，进一步用文本，图像等来详细说明项目。我喜欢它的是你不必离开主页来查看项目，可以通过按右上角的关闭按钮关闭它，或者点击该元素之外的任何地方。特别是在Laucke-Sibein的网页上，这很不错，当你滚动得足够远时，元素会消失。

获得类似结果有多难？这个功能如何运作？我整个下午都在寻找，但没有找到能帮助我进一步发展的东西。

Answer 1

听起来你正在寻找一个模态窗口。有大量的jQuery库，甚至是纯CSS解决方案。我使用的一个不错的是jQuery fancybox，它支持视频，iframe，内容，图片库。它非常强大。

Answer 2

正如其他人所提到的，有许多jQuery插件，如lightbox，fancybox等，能够输出图像和文本。或者jquery-ui对话框可以工作。

或者，您可以在div中创建投资组合项目，并在点击事件中显示它们。

<body>
    <div id="project-list">
        html showing images from your projects. <br />
        <img src="img1.jpg" data-project="project1" />
        <img src="img2.jpg" data-project="project2" />
    </div>
    <div id="project1" class="project">
        html displaying <br />
        your project 1
    </div>
    <div id="project2" class="project">
        html displaying <br />
        your project 2
    </div>
</body>

然后css之类的东西：

.project { position: absolute; top: 100px; left: 100px; display: none; }

#project-list.fixed { position: static; }

然后使用jQuery看起来像：

$(function(){
    // add click handler to the images
    $('#project-list img').click(function(e){
        // if a project is visible then just return and let the
        // document click handler handle the closing of the project
        if($('.project:visible').length > 0){
            return; 
        }
        // get the data project attribute which tells you which project to open
        var project = $(this).data('project'); 
        $('#' + project).slideDown('slow');
        // add the fixed class to the project list so that it doesn't scroll
        $('#project-list').addClass('fixed');
        // you must have this to keep the click event from bubbling up
        // through the DOM and triggering the document click function
        // which would close the project as soon as it opens. 
        e.stopPropagation();
    });

    $(document).click(function(){
        // this closes the project when anything is clicked that doesn't
        // have the event.stopPropagation function set. 
        $('.project').slideUp('slow');
        $('#project-list').removeClass('fixed');
    });

    $('.project').click(function(e){
        // you want this so if they click anything in the project it doesn't 
        // close the project. 
        e.stopPropagation();
    });
});

在这里看一个小提琴http://jsfiddle.net/wdv79yxw/1/

单击时“悬停”元素

2 个答案: