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

[html5 + css3] Heapshot Gallery Slider

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi banbaonylong, 18/6/13.

Lượt xem: 4,835

  1. banbaonylong Ko phải assmin

    Nguồn: https://github.com/Jiwoks/heapshot

    • Screenshot [​IMG]
    • Cách sử dụng
      • Chèn code vào page
        PHP:
        <script src="jquery.js" type="text/javascript"></script>
        <
        script src="js/jquery.imagesloaded.min.js" type="text/javascript"></script>
        <
        script src="js/jQueryRotate.min.js" type="text/javascript"></script>
        <
        script src="js/jquery.heapshot.js" type="text/javascript"></script>
        <
        link rel="stylesheet" href="css/heapshot.css"/>
      • Ảnh đặt trong class heapshot
        PHP:
        <ul class="heapshot">
        <
        li><img src="img/1.jpg" /></li>
        <
        li><img src="img/2.jpg" /></li>
        <
        li><img src="img/3.jpg" /></li>
        <
        li><img src="img/4.jpg" /></li>
        <
        li><img src="img/5.jpg" /></li>
        <
        li><img src="img/6.jpg" /></li>
        </
        ul>
      • Khởi tạo hiệu ứng
        PHP:
        jQuery(document).ready(function($) {
        $(
        '.heapshot').heapshot();
        });
      • Tùy biến hiệu ứng
        PHP:
        jQuery(document).ready(function($) {
        $(
        '.heapshot').heapshot({
        'indexStart' 100,
        'rotation' 80,
        'easing' : function(xtbcd){return c*t/b;},
        'overflowparents' true,
        'autostart' true,
        'animationdelay' 1500
        });
        });
        • indexStart: z-index của bức ảnh
        • rotation: góc quay của bức ảnh khi hiệu ứng xảy ra
        • easing: hàm di chuyển (nếu bạn có thể tự nghĩ ra 1 hàm di chuyển thì hãy sửa)
        • overflowparents: chính là overflow
        • autostart: giá trị là true thì tự trình diễn hiệu ứng
        • animationdelay: thời gian tạm ngừng khi di chuyển từng bức ảnh.
    • Demo View demo
    • Download
      Code:
      http://www.mediafire.com/download/zznfrcjrb55xpvr/
      (Pass: vietdesigner.net)

    ...
    Đoilơ ViệtDesigner, Love Rain, mgr2 người khác thích bài viết này.
  2. mgr

    mgr Cựu quản trị

    :D ô, hay thế, đẹp lắm luôn
  3. tui_la_ma

    tui_la_ma Mới đăng kí

    cái này sử dụng sao. ai chỉ e với
  4. Nguyễn Văn Tính

    Nguyễn Văn Tính Thành viên cấp 1

    chỉ em với :( show clip yk
  5. Heart

    Heart Mới đăng kí

    Nguyễn Văn Tính : Bạn chỉ cần thay thế hình trong class heapshot bằng hình của bạn thôi.
  6. Heart

    Heart Mới đăng kí

    Thuộc tính overflow là gì ? Nó có bao nhiêu giá trị ? Cách sử dụng các giá trị đó như thế nào vậy bác chủ topic ?

Ủng hộ diễn đàn