Question

我正在努力创建一个交互式投资组合页面，我按照youtube（https://www.youtube.com/watch?v=44pvweNCi7g&index=22&list=PLHPcpp4e3JVpXbtgyD-k-nCmwpbbMIHOh）的教程显示了一个简单的java代码，该代码从缩略图中获取“img”信息，然后将其投影到叠加层上。

我跟着一切完全相同，但由于某种原因，“＃frame”一直都是空白的。

$(function(){
    $("#portfolio img").click(function(){
        var src = $(this).attr("src");
        $("#frame img").attr("src", src);
        $("#frame").fadeIn();
        $("#overlay").fadeIn();
    });
});

这是java代码。

    <div id = "overlay"></div>
    <div id = "frame"></div>
    <img src = "" alt = ""/>

<div id = "work">
        <h1>Here is my portfolio</h1>
        <p>This has some paragraphes in this</p>
        <ul id = "portfolio">
            <li><img src = "images/nxfwXYK.jpg" alt = "img"></li>
            <li><img src = "images/demo.jpg" alt = "img"></li>
            <li><img src = "images/demo.jpg" alt = "img"></li>
            <li><img src = "images/demo.jpg" alt = "img"></li>
        </ul>
    </div>

并且是包含图像的Html代码。

Answer 1

您的图片位于第div帧之外，因此将其放在div内，因为您的jquery选择器$("#frame img")表示img位于div内：

<div id = "frame"><img src = "" alt = ""></img></div>

或使用以下脚本：

$(function(){
    $("#portfolio img").click(function(){
        var src = $(this).attr("src");
        $("#frame").next('img').attr("src", src);// use next to get image
        $("#frame").fadeIn();
        $("#overlay").fadeIn();
    });
});

Answer 2

我的意思是：

<div id = "overlay"></div>
<div id = "frame">
    <img src = "" alt = ""/> // the img is now inside the #frame element
</div>

<div id = "work">
    <h1>Here is my portfolio</h1>
    <p>This has some paragraphes in this</p>
    <ul id = "portfolio">
        <li><img src = "images/nxfwXYK.jpg" alt = "img"></li>
        <li><img src = "images/demo.jpg" alt = "img"></li>
        <li><img src = "images/demo.jpg" alt = "img"></li>
        <li><img src = "images/demo.jpg" alt = "img"></li>
    </ul>
</div>

Answer 3

这会有用......

$(function(){
    $("#portfolio img").click(function(){
        var src = $(this).attr("src");
        $("#frame").css("background-image", src);
        $("#frame").fadeIn();
        $("#overlay").fadeIn();
    });
});

Answer 4

首先隐藏你的积木

<style>
    #overlay, #frame{
        display: none;
    }
</style>

然后将img放入正确的dom

    <div id="overlay">
        <div id="frame">
            <img src="" alt=""/>
        </div>
    </div>

图像文件未加载到我的#frame上

4 个答案: