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

hieu-ung-kinh-lup-css3-jquery

Ứ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ọ.

hieu-ung-kinh-lup-css3-jquery

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 :

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-shadowborder-radius để tạo kính lúp.

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.

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:

Tags

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

Hà Nội

Light Rain
Humidity: 68
Wind: 16.09 km/h
17 °C
16 17
24 Mar 2016
14 22
25 Mar 2016
ADS2

Đánh giá

Cảm nhận về website?

View Results

Loading ... Loading ...

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