2011-02-06 2 views
2

Я создаю флип-действие страницы, используя jQuery и CSS. У меня работает завиток страницы, но объявление за вилкой страницы не видно. Проверьте, что я до сих пор ...Страница flip не работает

Это в моем файл 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 изображение страницы локон и прекрасно работает. Однако message.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; 
} 

У кого-нибудь есть идеи?

+0

Вы можете сделать демонстрацию, чтобы люди могли видеть это в действии - используйте http://jsfiddle.net или что-то в этом роде. – Orbling

+0

Если вы просто установили черный фон на msg_block и удалили изображение, отображается ли div правильно? – Robin

+0

Хорошо, я изменил свойство фона на фоновый цвет: черный, и он показывает, но не закрывает центрированный div и отлично работает с черным фоном. –

ответ

0

У вас есть надлежащий <!Doctype> на HTML-странице?

+0

Да, знаю. Это было первое, что я проверил. –

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

Отсутствующие одинарные кавычки, попробуйте?

+2

Кавычки не требуются, насколько я знаю. – Robin

+0

Хорошая добыча .... Позвольте мне попробовать ... –

+0

Нет, это не сработало. –

0

Хорошо, я понял. Это все связано с моим кодом css. Я думаю, это хороший урок, чтобы действительно посмотреть ваш код. Извините за все неприятности. Теперь я работаю. Если кто-то хочет узнать, как это сделать, я уверен, что, пройдя через это много АД, я точно знаю, что делаю. lol

Смежные вопросы