Smiley face

عنوان : افكت صفحه برعكس ساده با استفاده از جی کوئری، CSS و HTML

1396/12/22 - 14:58:10
Simple page flip effect using Jquery, css and simple html


افكت صفحه برعكس ساده با استفاده از جی کوئری، CSS و HTML

 

این بخش جاوا اسکریپت را وارد کنید ...

بخش وب سایت شما

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 

//Page Flip on hover

    $("#flipthepage").hover(function() {

        $("#flipthepage img , .msg_block").stop()

            .animate({

                width: '307px',

                height: '319px'

            }, 500);

        } , function() {

        $("#flipthepage img").stop()

            .animate({

                width: '50px',

                height: '52px'

            }, 220);

        $(".msg_block").stop()

            .animate({

                width: '50px',

                height: '50px'

            }, 200);

    });

});

</script>


حالا سبک مورد نیاز را اضافه کنید

<style type="text/css">

img { behavior: url(iepngfix.htc) }

#flipthepage {

    position: relative;

    right: 0; top: 0;

    float: right;

}

#flipthepage img {

    width: 50px; height: 52px;

    z-index: 99;

    position: absolute;

    right: 0; top: 0;

    -ms-interpolation-mode: bicubic;

}

#flipthepage .msg_block {

    width: 50px; height: 50px;

    overflow: hidden;

    position: absolute;

    right: 0; top: 0;

    background: url(http://mistonline.in/wp/demo/subscribe.png) no-repeat right top;

}

</style>


بخش HTML

<div id="flipthepage">

        <a href="http://mistonline.in/wp"><img src="http://mistonline.in/wp/demo/page_flip.png" alt="" /></a>

        <div class="msg_block"></div>

</div>


نمايش دمو

1396/12/22 - 14:58:10
برچسب هاي مطلب :



شما اولين نفري باشيد كه نظر ارسال مي كند.

فرم ثبت نظر

نام و نام خانوادگی
ایمیل
وبلاگ
نظر و کامنت
كد امنيتي