Question

我试图制作它以便点击我的网页上的图像时，会显示完整的图像。但是，我的javascript似乎对我fiddle中的内容感到满意。

由于我的图像被链接到ASP.Net中的pagegridview，我必须使用图像的来源，并且我将它链接到我称为imgFull的属性。小提琴上的代码用于测试，我的实际代码如下：

CSS：

#overlay{
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    background-color: #000; 
    opacity: 0.7;
    filter: alpha(opacity = 70) !important;
    display: none;
    z-index: 100;
}

使用Javascript：

$("img").click(function(){                                          
    $("#imgBig").attr("src", $(this).attr('fullImg'));
    $("#overlay").show();
    $("#overlayContent").show();
});

$("#imgBig").click(function(){
    $("#imgBig").attr("src", "");
    $("#overlay").hide();
    $("#overlayContent").hide();
});

ASP.NET中的HTML：

<!-- Divs for displaying the full sized image. Initially hidden. Hides again when clicked -->
<div id="overlay"></div>
<div id="overlayContent">
    <asp:Image runat="server" ID="imgFull" ImageAlign="AbsMiddle" Width="400" ImageUrl="https://www.google.com/images/srpr/logo11w.png" CssClass="imgBig"/>
</div>

Javascript不是我的强项，一旦这个项目结束，我打算花一些时间来学习它，但是目前，我必须使用消防水带＆＃34;饮用＃34;接近并希望我能保留我正在使用的东西。任何帮助表示赞赏。

Answer 1

你有一个错字：

$("#imgSmall").click(function(){                                                
    $("#imgBig").attr("src"; $(this).attr('src'));
    $("#overlay").show();
    $("#overlayContent").show();
});

您对src的分配中的分号应为逗号：

$("#imgSmall").click(function(){                                                
    $("#imgBig").attr("src", $(this).attr('src'));
    $("#overlay").show();
    $("#overlayContent").show();
});

您应该学习的第一件事就是使用浏览器的开发人员工具。 Chrome有很棒的工具（Hit F12），但Firebug for Firefox也非常适合Javascript调试。

使用Javascript在同一页面上查看完整尺寸的图像

1 个答案: