Question

我正在尝试使用fadein隐藏div制作图像onclick函数问题是我真的不知道jquery或javascript那么好。我已经搜索过尝试在css中执行此操作，但我听说它是错误的地狱，我不太了解它js / jq将我需要的代码拼凑在一起以及应该去哪里。

基本上我想要的是这个：你单击一个图像，图像在隐藏的div中淡入，最好使背景变暗（有点像shadowbox）然后在隐藏div中的关闭链接的点击上，div淡出并且背景恢复正常

现在我有正常的div，要点击的图像，隐藏的div和设置的链接。

我知道可以做到，我只是花了很多时间搞清楚它。请帮帮忙？

::更新JS更改的更新代码::

HTML -

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title Goes Here</title>
    <meta name="keywords" content=" Enter Metatags" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="shadowbox.css">
    <script type="text/javascript" src="shadowbox.js"></script>
    <script type="text/javascript">Shadowbox.init();
    </script></head>

    <body bgcolor="#547FA1">
    <div id="content">
<div id="wrapper">
    <div id="holder"><a href="#"><img src="images/openimage2.jpg" alt="open" width="1200" height="645" border="0" usemap="#Map" /></a>
      </img></div> 
      <div class="shadowdisc">
        <p>&nbsp;</p>
        <font size=4 color=#999><p align=center>Content for Hidden Div.</p>
     <p align=center>Here is more content</p>
     <br /><br />
     <p align=center>Finishing the content here</p>
      <p>
      <p>
      <p align=center><a href="welcome.html">ENTER</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.google.com">EXIT</a></p>
    <p>
   <p>
     <p align=right><a href="#">Close</a>
     </font>   
      </div>
       </div>
      </div>
     </div>
    </body
    </html>

CSS-

      #content{
width: auto;
height: auto;
overflow: hidden;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed
color: #5B5B5B;
           }



     #wrapper{
width: 1200px;
margin-right: auto;
margin-left: auto;
height: 1100px;
           }


      #holder{
position: relative;
width: 1200px;
top: 150px;
background-color: #E3E3E3;
height: 594px;
           }

    .shadowdisc{
width: 900px;
background-image: url(images/disbg.png);
position: relative;
bottom: 400px;
border: 1px solid #999;
left: 148px;
padding: 10px;
display: none;
           }
</style>

的Javascript

     <link rel="stylesheet" type="text/css" href="shadowbox.css">
    <script type="text/javascript" src="shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init();
    </script>
    <script>
      $(function () { // Onload

        $("#showImage").click(function () {
          $("#shadowdisc").fadeIn(1000);
       });

        $("#closeLink").click(function () {
          $("#shadowdisc").fadeOut(1000);
        });

      });
    </script>

Answer 1

以下是example如何使用JQuery和一些CSS。

<强> HTML

<button id="showButton">Show Panel</button>
<div id="hiddenPanel" class="hidden">
  <p>I'm a hidden div</p>
  <button id="closeButton">close me</button>
</div>

<强> CSS

.hidden {
    display: none;
    opactiy: 0;
}

<强>的JavaScript

<script>
  $(function () { // Onload

    $("#showButton").click(function () {
      $("#hiddenPanel").fadeIn(1000);
    });

    $("#closeButton").click(function () {
       $("#hiddenPanel").fadeOut(1000);
    });

  });
</script>

Answer 2

的 jsBin demo

<div id="lightbox"></div> <img class="thumb" src="img1.jpg" alt="" /> <img class="thumb" src="img2.jpg" alt="" />

CSS：

*{margin:0;padding:0;} h2, p{padding:30px;} #lightbox{ position:fixed; top:0px; left;0px; background:rgba(0,0,0,0.6); width:100%; height:100%; text-align:center; cursor:pointer; display:none; } #lightbox > img{ position:relative; height:400px; top:50%; margin:-200px auto; display:inline; box-shadow:0 3px 25px #000, 0 0 0 5px rgba(255,255,255,0.4); width:auto; } .thumb{ float:left; padding:10px; width:180px; cursor:pointer; }

JQ：

$('.thumb').click(function(){ var src = $(this).attr('src'); $('#lightbox').append( '<img src="'+src+'"/>' ).fadeTo(800,1); }); $('#lightbox').click(function(){ $(this).fadeTo(800,0, function(){ $(this).empty().hide(); }); });

jquery或javascript图像onclick div fadein / link onclick div fadeout

2 个答案: