翻頁不起作用

我正在使用jQuery和CSS創建頁面翻轉操作。我有頁面捲曲工作，但頁面捲曲後面的聲明不可見。查看一下我迄今爲止...翻頁不起作用

這是我的index.html文件：

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

// Page Flip on hover 

    $("#pageflip").hover(function() { 
     $("#pageflip img , .msg_block").stop() 
      .animate({ 
       width: '307px', 
       height: '319px' 
       }, 500); 
      } , function() { 
      $("#pageflip img").stop() 
       .animate({ 
        width: '50px', 
        height: '52px' 
       }, 220); 
      $(".msg_block").stop() 
       .animate({ 
        width: '50px', 
        height: '50px' 
       }, 200); 
}); 
}); 
</script> 
</head> 

<body> 

<div id="all"> 

    <div id="pageflip"> 
    <a href="#"> 
     <img src="stylesheets/images/flip.png" alt="" /> 
     <div class="msg_block"></div> 
    </div>

這是我的CSS ...

的flip.png圖像是頁面捲曲並且工作非常好。然而，announce.png不能在任何地方看到。

#pageflip { 
    position:relative; 
} 

#pageflip img { 
    width: 50px; 
    height: 52px; 
    z-index:99; 
    position:absolute; 
    right:0; 
    top:0; 
    -ms-interpolation-mode: bicubic; 
} 

#pageflip .msg_block { 
    width: 50px; 
    height: 50px; 
    position:absolute; 
    overflow:hidden; 
    right:0; 
    top:0; 
    background: url(announce.png) no-repeat right top; 
}

任何人有什麼想法？

來源

2011-02-06 Tabetha Moe

你可以做一個演示，所以人們可以看到這在行動 - 使用http://jsfiddle.net什麼的。 – Orbling 2011-02-06 00:29:58

如果您只是將msg_block的黑色背景設置爲實例並刪除圖像，div是否正確顯示？ – Robin 2011-02-06 00:39:51

好的，我將背景屬性更改爲背景色：黑色，它顯示但不掩蓋居中的div，並且與黑色背景非常協調。 – 2011-02-06 00:47:27

您的HTML頁面上是否有正確的<!Doctype>？

來源

2011-02-06 00:28:12 0x60

background: url('announce.png') no-repeat right top;

缺少單引號，試試？

來源

2011-02-06 00:29:01 benhowdle89

好吧，我想通了。這一切都與我的CSS代碼。我想這是真正看你的代碼的好教訓。對不起，所有的麻煩傢伙。我現在開始工作了。如果有人想學習如何做到這一點，我相當確信，在經歷了這麼多的HELL後，我確切地知道我在做什麼。大聲笑

來源

2011-02-06 01:13:46

翻頁不起作用

回答

相關問題