Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Cách sử dụng jQuery Imagelens

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi springriver, 7/3/15.

Lượt xem: 4,172

  1. springriver Thành viên cấp 1

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

    [​IMG]

    Cách sử dụng rất đơn giản, bạn vào đây để download file jquery. imageLens.js về:

    HTML:
    
    http://www.dailycoding.com/posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx
    
    
    Sau đó thêm vào site của bạn :

    HTML:
    
    <script src="
    	
    jquery.
    	
    imageLens.js" type="text/javascript"></script>
    
    ta có đoạn HTML như sau:

    HTML:
    
    <img id="img_01" src="king.png" width="384" height="240"/>
    
    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:

    HTML:
    
    <script type="text/javascript">
    $(function () {
    $("#img_01").
    	
    imageLens();
    });
    </script>
    
    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

    HTML:
    
    $("#img_01").
    	
    imageLens({ imageSrc: "sample01.jpg" });
    
    trong đó sample01.jpg là ảnh được zoom.

    Bạn cũng có thể thay đổi cỡ lens:

    HTML:
    
    $("#img_01").
    	
    imageLens({ lensSize: 200 });
    
    Bạn có thể thay đổi màu viền của len bằng lệnh:

    HTML:
    
    $("#img_01").
    	
    imageLens({ borderSize: 8, borderColor: "#06f" });
    
    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.

    ...
    Phạm Hữu Dưjumb0sanlat thích bài viết này.

Ủng hộ diễn đàn