hieu ung kinh lup ~ THANH DIEN IT

Tạo hiệu ứng kính lúp cho ảnh với jQuery và CSS3

28 Oct, 2014 tmviet.com CSS nâng cao 7 2

Ứng dụng này thỉnh thoảng chúng ta thường bắt gặp tại các trang web bán hàng, khi đưa chuột vào các hình ảnh sản phẩm thì các hình ảnh sản phẩm đó thông qua một kính lúp sẽ phóng to và rõ ràng các chi tiết trên tấm hình đó. Hiệu ứng này rất hữu dụng khi mà khách hàng cần phải xem rõ sản phẩm mà họ muốn mua, và cũng chính vì thế mà khi khách hàng muốn thiết kế một trang web bán hàng, họ thường yêu cầu đưa chức năng này vào trong trang web của họ.

Trong bài viết ngày hôm nay, TM Việt xin được chia sẻ cho các bạn cách tạo hiệu ứng kính lúp đơn giản cho hình ảnh bằng CSS3 và jQuery. Qua bài viết này, các bạn sẽ có thể áp dụng nó vào cho những trang web bán hàng của các bạn.

HTML

Để minh họa, chúng ta cần có khung chuẩn html như sau :

<!-- Lets make a simple image magnifier -->
<div class="magnify">
     
    <!-- This is the magnifying glass which will contain the original/large version -->
    <div class="large"></div>
     
    <!-- This is the small image -->
    <img class="small" src="iphone.jpg" width="200"/>
     
</div>

</div>

Trong đoạn html bên trên, có 2 phần mà chúng ta cần lưu ý là một thẻ div với class là .large sẽ là nơi chứa ảnh lớn khi rê chuột vào ảnh nhỏ. Phần còn lại là ảnh nhỏ mà chúng ta sẽ hiển thị trên màn hình.

CSS

Ở phần này, chúng ta sẽ sử dụng thuộc tính CSS3 box-shadow và border-radius để tạo kính lúp.

/*Some CSS*/
* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative;}
 
/*Lets create the magnifying glass*/
.large {
    width: 175px; height: 175px;
    position: absolute;
    border-radius: 100%;
     
    /*Multiple box shadows to achieve the glass effect*/
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
     
    /*Lets load up the large image first*/
    background: url('iphone.jpg') no-repeat;
     
    /*hide the glass by default*/
    display: none;
}
 
/*To solve overlap bug at the edges during magnification*/
.small { display: block; }

/*Some CSS*/

* {margin: 0; padding: 0;}

.magnify {width: 200px; margin: 50px auto; position: relative;}

/*Lets create the magnifying glass*/

.large {

width: 175px; height: 175px;

position: absolute;

border-radius: 100%;

/*Multiple box shadows to achieve the glass effect*/

box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),

0 0 7px 7px rgba(0, 0, 0, 0.25),

inset 0 0 40px 2px rgba(0, 0, 0, 0.25);

/*Lets load up the large image first*/

background: url('iphone.jpg') no-repeat;

/*hide the glass by default*/

display: none;

}

/*To solve overlap bug at the edges during magnification*/

.small { display: block; }

jQuery

Và sau đây là toàn bộ đoạn code sẽ giúp các bạn tạo hiệu ứng kính lúp cho ảnh. Mỗi một đoạn code có ghi chú thích rõ ràng cho các bạn tham khảo.

<script type="text/javascript">
$(document).ready(function(){
 
    var native_width = 0;
    var native_height = 0;
 
    //Now the mousemove function
    $(".magnify").mousemove(function(e){
        //When the user hovers on the image, the script will first calculate
        //the native dimensions if they don't exist. Only after the native dimensions
        //are available, the script will show the zoomed version.
        if(!native_width && !native_height)
        {
            //This will create a new image object with the same image as that in .small
            //We cannot directly get the dimensions from .small because of the
            //width specified to 200px in the html. To get the actual dimensions we have
            //created this image object.
            var image_object = new Image();
            image_object.src = $(".small").attr("src");
             
            //This code is wrapped in the .load function which is important.
            //width and height of the object would return 0 if accessed before
            //the image gets loaded.
            native_width = image_object.width;
            native_height = image_object.height;
        }
        else
        {
            //x/y coordinates of the mouse
            //This is the position of .magnify with respect to the document.
            var magnify_offset = $(this).offset();
            //We will deduct the positions of .magnify from the mouse positions with
            //respect to the document to get the mouse positions with respect to the
            //container(.magnify)
            var mx = e.pageX - magnify_offset.left;
            var my = e.pageY - magnify_offset.top;
             
            //Finally the code to fade out the glass if the mouse is outside the container
            if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
            {
                $(".large").fadeIn(100);
            }
            else
            {
                $(".large").fadeOut(100);
            }
            if($(".large").is(":visible"))
            {
                //The background position of .large will be changed according to the position
                //of the mouse over the .small image. So we will get the ratio of the pixel
                //under the mouse pointer with respect to the image and use that to position the
                //large image inside the magnifying glass
                var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
                var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
                var bgp = rx + "px " + ry + "px";
                 
                //Time to move the magnifying glass with the mouse
                var px = mx - $(".large").width()/2;
                var py = my - $(".large").height()/2;
                //Now the glass moves with the mouse
                //The logic is to deduct half of the glass's width and height from the
                //mouse coordinates to place it with its center at the mouse coordinates
                 
                //If you hover on the image now, you should see the magnifying glass in action
                $(".large").css({left: px, top: py, backgroundPosition: bgp});
            }
        }
    })
})
</script>

$(document).ready(function(){

var native_width = 0;

var native_height = 0;

//Now the mousemove function

$(".magnify").mousemove(function(e){

//When the user hovers on the image, the script will first calculate

//the native dimensions if they don't exist. Only after the native dimensions

//are available, the script will show the zoomed version.

if(!native_width && !native_height)

{

//This will create a new image object with the same image as that in .small

//We cannot directly get the dimensions from .small because of the

//width specified to 200px in the html. To get the actual dimensions we have

//created this image object.

var image_object = new Image();

image_object.src = $(".small").attr("src");

//This code is wrapped in the .load function which is important.

//width and height of the object would return 0 if accessed before

//the image gets loaded.

native_width = image_object.width;

native_height = image_object.height;

}

else

{

//x/y coordinates of the mouse

//This is the position of .magnify with respect to the document.

var magnify_offset = $(this).offset();

//We will deduct the positions of .magnify from the mouse positions with

//respect to the document to get the mouse positions with respect to the

//container(.magnify)

var mx = e.pageX - magnify_offset.left;

var my = e.pageY - magnify_offset.top;

//Finally the code to fade out the glass if the mouse is outside the container

if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)

{

$(".large").fadeIn(100);

}

else

{

$(".large").fadeOut(100);

}

if($(".large").is(":visible"))

{

//The background position of .large will be changed according to the position

//of the mouse over the .small image. So we will get the ratio of the pixel

//under the mouse pointer with respect to the image and use that to position the

//large image inside the magnifying glass

var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;

var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;

var bgp = rx + "px " + ry + "px";

//Time to move the magnifying glass with the mouse

var px = mx - $(".large").width()/2;

var py = my - $(".large").height()/2;

//Now the glass moves with the mouse

//The logic is to deduct half of the glass's width and height from the

//mouse coordinates to place it with its center at the mouse coordinates

//If you hover on the image now, you should see the magnifying glass in action

$(".large").css({left: px, top: py, backgroundPosition: bgp});

}

})

</script>

Các bạn có thể xem cách kết nối chúng ở file đính kèm và live demo bên dưới:

Download Live Demo

Shortlink:

Có Thể Bạn Quan Tâm...

2 Bình luận về “Tạo hiệu ứng kính lúp cho ảnh với jQuery và CSS3”

ĐIỆP NGỌC HOÀNG says:

28/10/2014 at 6:59 PM

Tất cả chỉ có vậy! chúc các bạn thành công

Reply

Hà Nội

Mostly Cloudy

Humidity: 94

Wind: 3.22 km/h

17 °C

16 18

28 Dec 2015

14 16

29 Dec 2015

ADS2

DỊCH VỤ WEB

Tìm chúng tôi trên Facebook

MẪU WEB MỚI

BÌNH LUẬN MỚI

ADS1

Thứ Hai, 28 tháng 12, 2015

Tạo hiệu ứng kính lúp cho ảnh với jQuery và CSS3

Có Thể Bạn Quan Tâm...

2 Bình luận về “Tạo hiệu ứng kính lúp cho ảnh với jQuery và CSS3”

Leave a Reply Cancel reply

Hà Nội

Đánh giá

DỊCH VỤ WEB

Dịch vụ SEO tổng thể

Dịch vụ Hosting

Dịch vụ quản trị website

Dịch vụ thiết kế website

Hosting Linux DirectAdmin

Tìm chúng tôi trên Facebook

MẪU WEB MỚI

BÌNH LUẬN MỚI

ĐANG ĐƯỢC CHÚ Ý

Bài 4: Font chữ trong CSS

Chương 03: Thuộc tính Danh sách trong HTML

Hosting Linux DirectAdmin

Tùy chỉnh hiển thị widgets wordpress bằng Plugin Dynamic Widgets

IDMcc for Firefox Update – download IDMcc cho firefox

Vị trí đặt từ khóa ăn điểm nhất trong SEO

0 nhận xét:

Social Profiles

Top Social Icons

Featured Posts

Facebook

Ads 468x60px

Total Pageviews

Top Stories

Find Us On Facebook

Social Networks

International

Auto News

About us

Flicker

Technology

Fashion

Video Of Day

Text Widget

Sample Text

About Me

Labels

Formulir Kontak

Đăng ký

Followers

Translate

Entertainment

About Me

Recent Posts

Popular Posts

Popular Posts

Label

Blog Archive

Recent Posts

Download

Categories

Sample Text

Unordered List

Definition List

Labels

Pages