Smiley face

Google

در فروشگاه اينترنتي داتيس   در كل اينترنت

تقويم و مناسبتها

رهگيري مرسولات پستي

كاربرگرامي شما مي توانيد پس از دريافت باركد پســتي از طريق دكمه رهگيري سفارشـات ، بوسيله دكمه رهگيري مرسوله پستي ، مرسـوله خود را از طريق وب سايت اداره پســت رديابي نماييد.

Datissoftware

Datissoftware

نماد ها

logo-samandehi

عناوين علمي و آموزشي

مطالب جديد

نرم افزارهاي مورد نياز

IDM دانلود Internet Download Manager
Chrome دانلود Google Chrome
Firefox دانلود Mozilla Firefox
Winrar دانلود Winrar
FlashPlayer دانلود Flash Player
Adobe Reader دانلود Adobe Reader
Mp4 Codec دانلود Mp4 Codec

آمار و اطلاعات

جهت عضــويت در خبرنامه فروشــگاه اينترنتي داتيــس ايميل صحيح خود را وارد نماييد.

عنوان : افكت صفحه برعكس ساده با استفاده از جی کوئری، 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
برچسب هاي مطلب :



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

فرم ثبت نظر

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