Question

我正在使用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;
}

有人有什么想法吗？

Answer 1

您的HTML网页上有适当的<!Doctype>吗？

Answer 2

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

缺少单引号，试试吗？

Answer 3

好的，我明白了。这与我的css代码有关。我想这是一个很好的教训，真正看你的代码。对不起，所有麻烦的家伙。我现在就开始工作了。如果有人想学习如何做到这一点，我相信在经历了这么多地狱之后，我确切地知道我在做什么。洛尔

页面翻转无效

3 个答案: