Bài viết sưu tầm

Jquery chính là một thư viện kiểu mới của Javascript giúp đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web. Không thể phủ nhận, jQuery giúp các nhà phát triển đơn giản hóa những dòng lệnh của Javascript và giúp người truy cập web cảm thấy thích thú bởi những hiệu ứng của nó mang lại. Hôm nay tôi sẽ giới thiệu với các bạn một Jquery tạo ra hiệu ứng Retina của Iphone với một hình ảnh tĩnh.

Như ta đã biết, Apple từ lâu đã áp dụng một chiến lược chiến thắng trong tiếp thị - tạo ra sản phẩm cũng được thiết kế, có một lượng fan chuyên dụng, và để cho các quảng cáo thổi phồng xây dựng trước mỗi phát hành sản phẩm. Và màn hình tốt nhất hiện nay Apple vẫn đag sử dụng là Retina.

Nay tôi giới thiệu với các bạn 1 Jquery có thể biến hình ảnh tĩnh này thành một "hiệu ứng Retina" đầy đủ chức năng chỉ với jQuery và CSS.

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

$(document).ready(function(){

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

    varleft  = 0,

        top          = 0,

        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');

            }

            returnfalse;

        }

        /*    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    : '-'+(1.6*left)+'px -'+(1.35*top)+'px'

        });

    }).mouseleave(function(){

        retina.stop(true,true).fadeOut('fast');

    }).mouseenter(function(){

        retina.stop(true,true).fadeIn('fast');

    });

});

Ngoài ra các bạn có thể xem demo tại đây: http://demo.tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/demo.html hoặc download các hướng dẫn và file tại đây: http://demo.tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/demo.zip