0

偽のパソコン画面を画像で作っています。Firefox アイコンの画像があり、マウスをその上に置くとサイズが大きくなり、アイコンの画像をクリックすると別の画像が表示されるようにしたいと考えています。これは私が得ることができた最も近いものです。

<html>
<title> Scope </title>

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>

  <body>
         <img src ="alarm clock2.jpg"/>

     <p>  Pulling the sheets into my body, I begin to sink back into the bed... 
          uggh... my alarm clock... time to get up..

         <img id="computerscreen" src= "computer.jpg"/>

         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <script src="script.js"></script>

         <img  id="grow" src="icon2.gif"/> 

         <img class="show hidden" src="screen2.jpg" />



</body>

ここにCSSがあります

#grow{
    position:absolute; 
    top:1157px; 
    left:599px; 
    width:47px; 
    z-index:4; 
    height:47px;
}

#grow:hover{
    top:1137px; 
    left:589px;
    width: 70px; !important;
    height: 70px; !important;
    cursor:pointer;
}

.hidden {
    display:none;
    position:absolute; 
    top:300px; 
    right: 0px; 
    width:850px;
    height:550px;
    z-index:6;
}

#computerscreen{
    position:absolute; 
    top:300px; 
    right: 0px; 
    z-index:3;
}

とスクリプト

$(document).ready(function(){
    $('#grow').click(function() {
        $('.hidden').fadeIn('slow', function() {
    });
});
4

2 に答える 2

0

css の '.hidden' で、display:none; を削除します。jQueryでそれを隠すので、jQueryは次のようになります...

$(document).ready(function () {
    $('.hidden').hide();

    $('#grow').click(function () {
        $('.hidden').fadeIn('slow');
    });
});

コールバック関数も必要ないので削除しました。

于 2013-08-29T19:42:22.037 に答える