بزرگنمایی با حرکت موس

بزرگنمایی با حرکت موس

در این آموزش قصد داریم تا به شما یک پلاگین جالب و تازه رو آموزش بدهیم.همانطور که میدانید در اپل یک قابلیت به نام Retina وجود دارد که کار آن مثل شبکیه چشم است و هنگام حرکت موس روی یک متن یا تصویر آن را به صورت بزرگ شده داخل یک دایره نشان می دهد که امروز ما قصد داریم آن را در قالب یک پلاگین وب برای شما آموزش بدهیم.

برای مشاهده لینک وارد شود

در قدم اول ما کدهای HTML را مینویسیم و همانطور که در زیر می بینید کدها بسیار ساده بوده و دارای چند تگ و یک تصویر هستند.

demo.html​

<div id="main">

    <div id="iphone">
        <div id="webpage">
            <img src="img/webpage.png" width="499" height="283" alt="Web Page" />
            <div id="retina"></div>
        </div>
    </div>

</div>

تگ iPhone# برای ما قالب گوشی اپل را نگه می دارد و در کنار آن تگ webpage# قسمتی از یک صفحه وب را نگه میدارد.در آخر نیز ما تگ retina را داریم  که با کدهای CSS آنها را گرد کردیم و عکس صفحه وب را داخل فریم قرار دایم که بعدا با حرکت موس روی آن عمل بزرگنمایی انجام خواهد شد.

i1

در قدم دوم ما به سراغ نوشتن کدهای CSS میرویم.ما برای تگ های iphone,webpage و retina استایل هایی خواهیم نوشت که این باعث میشود نتیجه کار ما جذابتر بشود.

styles.css

#iphone{
    /* The iphone frame div */
    width:750px;
    height:400px;
    background:url('img/iphone_4G.png') no-repeat center center;
}

#webpage{
    /* Contains the webpage screenshot */
    width:499px;
    height:283px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-141px 0 0 -249px;
}

#retina{
    /* The Retina effect */
    background:url('img/webpage.png') no-repeat center center white;
    border:2px solid white;

    /* Positioned absolutely, so we can move it around */
    position:absolute;
    height:180px;
    width:180px;

    /* Hidden by default */
    display:none;

    /* A blank cursor, notice the default fallback */
    cursor:url('img/blank.cur'),default;

    /* CSS3 Box Shadow */
    -moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
    -webkit-box-shadow:0 0 5px #777;
    box-shadow:0 0 5px #777, 0 0 10px #aaa inset;

    /* CSS3 rounded corners */
    -moz-border-radius:90px;
    -webkit-border-radius:90px;
    border-radius:90px;
}

#retina.chrome{
    /* A special chrome version of the cursor */
    cursor:url('img/blank_google_chrome.cur'),default;
}

#main{
    /* The main div */
    margin:40px auto;
    position:relative;
    width:750px;
}

کدهای بالا به دلیل سادگی و توضیح هر کد در بالای آن نیاز به توضیح ندارند .

در قدم  آخر ما کدهای مربوط به جی کوئری را مینویسیم.از آنجایی که تمام استایل های ما در یکجا قرار دارند ما با کمک کتابخانه جی کوئری تعدادی کد جاوااسکریپت مینویسیم.

script.js

$(document).ready(function(){

    /* This code is executed on the document ready event */

    var left	= ۰,
        top		= ۰,
        sizes	= { retina: { width:190, height:190 },
                webpage:{ width:500, height:283 } },
        webpage	= $('#webpage'),
        offset	= { left: webpage.offset().left, top: webpage.offset().top },
        retina	= $('#retina');

    if(navigator.userAgent.indexOf('Chrome')!=-1)
    {
        /*	Applying a special chrome curosor,
            as it fails to render completely blank curosrs. */

        retina.addClass('chrome');
    }

    webpage.mousemove(function(e){

        left = (e.pageX-offset.left);
        top = (e.pageY-offset.top);

        if(retina.is(':not(:animated):hidden')){
            /* Fixes a bug where the retina div is not shown */
            webpage.trigger('mouseenter');
        }

        if(left<0 || top<0 || left > sizes.webpage.width ||
            top > sizes.webpage.height)
        {
            /*	If we are out of the bondaries of the
                webpage screenshot, hide the retina div */

            if(!retina.is(':animated')){
                webpage.trigger('mouseleave');
            }
            return false;
        }

        /*	Moving the retina div with the mouse
            (and scrolling the background) */

        retina.css({
            left				: left - sizes.retina.width/2,
            top					: top - sizes.retina.height/2,
            backgroundPosition	: '-'+(۱.۶*left)+'px -'+(1.35*top)+'px'
        });

    }).mouseleave(function(){
        retina.stop(true,true).fadeOut('fast');
    }).mouseenter(function(){
        retina.stop(true,true).fadeIn('fast');
    });
});

در تابع mouseover مختصات فعلی موس توسط e.pageX و e.pageY منتقل میشود،اما با document به صورت absolute ارتباط پیدا می کند.البته باید این را نیز در نظر بگیرید که با تمام شدن عرض وبسایت نمایش داده شده باید عمل بزرگنمایی نیز خاتمه پیدا کند.

پایان

+2
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

یک دیدگاه

  1. سلام
    ممنون از این مطلب
    به کارم اومد
    ممنون از تلاشتون

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


پنج − 2 =