Jquery – Tạo hiệu ứng xem hình ảnh lớn với Jquery

0
354

[VIDEO TUT]

  • Đang cập nhật…

1. Giới thiệu

  • Trong bài học hôm nay tôi xin gừi tới các bạn một hiệu ứng tooltip trong Jquery có tác dụng là zoom to hình ảnh khi các bạn di chuyển mouse vào

2. Demo

a. Tiến hành
  • Đầu tiên các bạn cần tải 2 file js sau về máy:

+ jquery.js

+jqueryzoom.js

  • Giờ công việc của chúng ta sẽ nhẹ nhàng hơn khi có 2 file jquery vừa rồi. Ở đây tôi có đoạn mã HTML:

  • Tôi thêm mã CSS:

  • Ở đây tôi đặt vào bên trong thẻ <a> đoạn class=”preview” với đường dẫn sẽ là đường dẫn đến hình ảnh lớn. Để hiển thị thêm tiêu đề ở bên dưới thì các bạn chỉ cần thêm thuộc tính title  vào bên trong thẻ <a> là xong. Phần còn lại thì trong file Jqueryzoom đã làm hộ chúng ta rồi.
b. View

1

12

123

3. Tổng kết

  • Như vậy là tôi đã hướng dẫn các bạn zoom to ảnh với jquery. Hi vọng sẽ giúp ích được cho các bạn. Chúc các bạn học thật tốt

Tác giả : Hà Trần Vietpro

[Total: 1    Average: 5/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here