Đệm Bông Ép

Kết quả 1 đến 2 của 2

Chủ đề: Cách sử dụng jQuery Imagelens

  1. #1
    Thành Viên Mới
    Ngày tham gia
    Jan 2015
    Bài viết
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cách sử dụng jQuery Imagelens

    joomla minify js giới thiệu tới các bạn plugin imagelens cho phép bạn tùy biến kích thước của lens, màu sắc viền lens, chọn một ảnh khác để zoom (không cần load ảnh gốc ngay từ đầu).


    Cách sử dụng rất đơn giản, bạn vào đây để download file jquery.imageLens.js về:
    Mã nguồn HTML:
    http://www.dailycoding.com/posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    Sau đó thêm vào site của bạn :
    Mã nguồn HTML:
    <script src="jquery.imageLens.js" type="text/javascript"></script>[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    ta có đoạn HTML như sau:
    Mã nguồn HTML:
    <img id="img_01" src="king.png" width="384" height="240"/>[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    Bạn nhớ thẻ img phải có 1 id, ta sẽ gọi id này ra để nó có hiệu ứng imagelens, để cho ảnh có hiệu ứng imagelens, ta có đoạn script sau:
    Mã nguồn HTML:
    <script type="text/javascript"> $(function () { $("#img_01").imageLens();  });  </script>[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    Như các bạn thấy ta gán hiệu ứng vào id của image.
    Có các cách tùy chọn của imagelens như sau:
    Nếu bạn muốn ảnh thumbnai khác với ảnh được zoom, bạn viết lệnh
    Mã nguồn HTML:
    $("#img_01").imageLens({ imageSrc: "sample01.jpg" });[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    trong đó sample01.jpg là ảnh được zoom.
    Bạn cũng có thể thay đổi cỡ lens:
    Mã nguồn HTML:
    $("#img_01").imageLens({ lensSize: 200 });[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    Bạn có thể thay đổi màu viền của len bằng lệnh:
    Mã nguồn HTML:
    $("#img_01").imageLens({ borderSize: 8, borderColor: "#06f" });[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    Nếu bạn sử dụng trình duyệt từ IE8 trở xuống, lens sẽ có hình vuông thay vì hình tròn.

  2. #2
    Thành Viên Mới
    Ngày tham gia
    Dec 2014
    Bài viết
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cái này rất hữu dụng với các trang web bán hàng, để người dùng zoom hình ảnh sản phẩm lên. Tạo hiệu ứng bắt mắt và trông rất chuyên nghiệp

Các Chủ đề tương tự

  1. TQ Cách sử dụng jQuery Carousel
    Bởi vanthai trong diễn đàn Website - Phần Mềm
    Trả lời: 1
    Tin đăng cuối: 03-03-2015, 02:47 PM
  2. TQ Hướng dẫn sử dụng lazy load của jquery
    Bởi xuanha trong diễn đàn Website - Phần Mềm
    Trả lời: 1
    Tin đăng cuối: 01-25-2015, 07:32 PM

Quyền viết bài

  • Bạn Không thể gửi Chủ đề mới
  • Bạn Không thể Gửi trả lời
  • Bạn Không thể Gửi file đính kèm
  • Bạn Không thể Sửa bài viết của mình
  •