Page flip isn't working_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-08 14:43 出处：网络

I am creating a page flip action using jQuery and CSS. I have the page curl working, but the announcement behind the page curl isn\'t visible. Check out what I have so far...

相关专题：css jquery

I am creating a page flip action using jQuery and CSS. I have the page curl working, but the announcement behind the page curl isn't visible. Check out what I have so far...

This is in my index.html file:

<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>

This is my CSS...

The flip.png image is the page curl and is working wonderfully. However, the announce.png cannot be seen anywhere.

#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;
}

Anyone have any ideas?

Do you have a proper <!Doctype> on your HTML page?

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

Missing single quotes, try that?

Ok, I figured it out. It was all to do with my css code. I guess this is a good lesson to really watch your code. Sorry for all the trouble guys. I got it working now. If anyone wants to learn how to do this, I am pretty confident that after going through this much HELL with it, I know exactly what I am doing. lol