Javascript '；悬停'；单击时的元素_Javascript_Jquery_Onclick_Hide_Show

Javascript '；悬停'；单击时的元素

javascript jquery

Javascript '；悬停'；单击时的元素,javascript,jquery,onclick,hide,show,Javascript,Jquery,Onclick,Hide,Show,我想要的是相当简单的，我有两个例子：当你看这些投资组合网站时，你会发现它是基于滚动的网站，主要依靠图片。我正在寻找的互动性是点击一个图像，在网页上产生一个“悬停”元素，用文本、图像等进一步细化项目。我喜欢它的地方在于，您不必离开主页查看项目，可以通过按下右上角的“关闭”按钮或单击此元素之外的任何位置来关闭它。特别是在Laucke Sibein的网页中，当你向下滚动足够远时，元素就会出现，这很好要达到类似的结果有多难？这个函数是如何工作的？我整个下午都在找，没能找到对我有帮助的东西。听起

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

当你看这些投资组合网站时，你会发现它是基于滚动的网站，主要依靠图片。我正在寻找的互动性是点击一个图像，在网页上产生一个“悬停”元素，用文本、图像等进一步细化项目。我喜欢它的地方在于，您不必离开主页查看项目，可以通过按下右上角的“关闭”按钮或单击此元素之外的任何位置来关闭它。特别是在Laucke Sibein的网页中，当你向下滚动足够远时，元素就会出现，这很好

要达到类似的结果有多难？这个函数是如何工作的？我整个下午都在找，没能找到对我有帮助的东西。

听起来你在找一个模态窗口。有很多jQuery库，甚至是纯CSS解决方案。我使用的一个不错的工具是jQuery fancybox，它支持视频、iFrame、内容和图像库。它非常健壮。

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

或者，您可以在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>

然后，使用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();
    });
});

在这里看到小提琴

欢迎来到堆栈溢出！请拿着，环顾四周，通读一遍，特别是你的问题的内容必须在你的问题中，不要链接。链接会腐烂，使问题及其答案在将来对人们毫无用处，人们不应该跟随一些随机链接来帮助你。如果这个问题没有意义，没有链接就无法回答，那么这个网站就不适合。这通常被称为lightbox，有jQuery插件可以让这个问题变得简单。谢谢！我以为灯箱只是用来拍照的。在给出的两个例子中，它们（都）使用lightbox元素吗？我以前使用过fancybox，肯定会再次研究它们，谢谢您的评论。我以为它们主要是用来拍照的。崇高，这是我一整天都在寻找的东西。非常感谢格雷格！很乐意帮忙。如果您的答案令人满意，请将其标记为正确答案。有一把好小提琴。我想，但我开始注意到，无论出于什么原因，如果我在浏览器中打开这把小提琴，它都不会工作。起初我试着将其应用到我自己的代码中，但没有得到响应。我已经直接从JSFIDLE复制了它以确保。它看起来完全一样，但没有功能。我可能做错了什么？您的html头部必须有一个引用jquery。您必须将代码包装在$（function（）{…code在这里…}）中；包装纸。这是在小提琴中为您处理的。这目前是我的index.html:和script.js:它的结果是：（我为“img1.jpg”和“img2.jpg”制作了两个基本图形，仍然没有功能。我用$（function（）{…code goes here…}）包装器尝试了它。我认为这很明显，但我无法理解。

$(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();
    });
});