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

[HTML + CSS+ JS] Tạo một Vòng xoay (Lottery)

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

Lượt xem: 13,326

  1. banbaonylong Ko phải assmin

    Vấn đề đặt ra: Flash là một nền tảng cũ kĩ, việc build một file flash vòng xoay tốn thời gian và dung lượng file nặng. Vòng xoay cần chạy đc trên đa phần trình duyệt FireFox, Chrome-based, IE 8+ nên Canvas (HTML5) ko khả thi (IE8, 9 ko hiểu hay chạy ko đúng).

    Vì thế, mình đành sử dụng <ul> và <li> kết hợp make-up CSS, sử dụng jquery làm hiệu ứng xoay vòng.

    Mô tả vòng xoay: Một div to bao bên ngoài, các div con (như hình là 14) xếp liên tiếp xung quanh cạnh của div to theo thứ tự từ 1 -> 14. Hiệu ứng xoay: khi màu đỏ "di chuyển" từ div con thứ 1 lần lượt sang các div con tiếp theo. Kết quả sẽ đc cập nhật và show liên tục ngay div giữa.

    [​IMG]
    Hình 1: minh họa vòng xoay​

    Giải quyết vấn đề: Đầu tiên, chúng ta phải có đc 1 dãy <li> tượng trưng cho các div con bên trong. <ul> sẽ thay thế cho div to bên ngoài. Màu đỏ sẽ xuất hiện khi <li> có lớp "active" và hiệu ứng xoay sẽ lặp (loop) liên tục ko dừng

    HTML
    HTML:
    <ul class="test2">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
    CSS
    HTML:
    <style>
    li.active {
        color: #FF0000;
    }
    </style>
    JS
    PHP:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <
    script>
        $(
    document).ready(function(){
            var 
    0;
            var 
    0;
            var 
    18 ;
            var 
    length = $('ul.test2').children().length;
            function 
    wheel()
            {
                
    setTimeout(function() {
                    $(
    'ul.test2 li:eq(' ')').addClass('active').siblings().removeClass('active');
                    
    a++;
                    
    b++;
                    if (
    == length)
                        
    0;
                    
    //if (b < c)
                        
    wheel();
                }, 
    720);
            }
         
            
    wheel();     
        });
    </
    script>
    giải thích tí:
    • c = 18+4 là "cờ" để dừng hiệu ứng xoay lại. 18 = 6*3 (có 6 <li> xoay 3 vòng).
    • Sau khi xoay 3 vòng, vòng xoay sẽ dừng lại ở <li> thứ 4
    • đoạn if(b<c) đã bị che đi để hiệu ứng xoay mãi. Nếu bạn muốn vòng xoay dừng lại ở 1 kết quả nào đó, hãy xóa"//" phía trước dòng đó, và chỉnh lại giá trị của c cho phù hợp
    Vậy là về cơ bản, ta đã có đc hiệu ứng xoay đơn giản. Để đc như hình 1, ta cần CSS lại tí :P
    [​IMG]

    Hoàn thiện thành phẩm
    Bắt tay vào CSS, để cho đẹp, sẽ có 12 <li> thành phần, và 1 div kết quả ngay giữa. :D
    HTML
    HTML:
    <ul class="play">
        <li class="mm m1">01</li>
        <li class="mm m2">02</li>
        <li class="mm m3">03</li>
        <li class="mm m4">04</li>
        <li class="mm m5">05</li>
        <li class="mm m6">06</li>
        <li class="mm m7">07</li>
        <li class="mm m8">08</li>
        <li class="mm m9">09</li>
        <li class="mm m10">10</li>
        <li class="mm m11">11</li>
        <li class="mm m12">12</li>
    </ul>
    <div class="result"></div>
    CSS
    HTML:
    <style>
    .play {
        display: block;
        float: left;
        height: 725px;
        padding: 0;
        position: relative;
        width: 725px;
    }
    .mm {
        display: block;
        height: 150px;
        width: 150px;
        background-color: #0000FF;
        color: #FF0000;
        transition: all 0.5s ease 0s;
        text-align: center;
        line-height: 30px;
        font-size: 25px;
    }
    .mm.active {
        background-color: #FF0000;
        color: #0000FF;
        transition: all 0.5s ease 0s;
        font-size: 28px;
    }
    .mm.m1 {
        left: 25px;
        position: absolute;
        top: 25px;
    }
    .mm.m2 {
        left: 200px;
        position: absolute;
        top: 25px;
    }
    .mm.m3 {
        left: 375px;
        position: absolute;
        top: 25px;
    }
    .mm.m4 {
        right: 25px;
        position: absolute;
        top: 25px;
    }
    .mm.m5 {
        right: 25px;
        position: absolute;
        top: 200px;
    }
    .mm.m6 {
        right: 25px;
        position: absolute;
        top: 375px;
    }
    .mm.m7 {
        right: 25px;
        position: absolute;
        bottom: 25px;
    }
    .mm.m8 {
        left: 375px;
        position: absolute;
        bottom: 25px;
    }
    .mm.m9 {
        left: 200px;
        position: absolute;
        bottom: 25px;
    }
    .mm.m10 {
        left: 25px;
        position: absolute;
        bottom: 25px;
    }
    .mm.m11 {
        left: 25px;
        position: absolute;
        top: 375px;
    }
    .mm.m12 {
        left: 25px;
        position: absolute;
        top: 200px;
    }
    .result {
        background-color: #FFFF00;
        color: #0000FF;
        height: 200px;
        left: 275px;
        position: absolute;
        top: 275px;
        width: 200px;
        text-align: center;
        font-size: 30px;
    }
    </style>
    Sử dụng position: absolute để set vị trí cho <li> :D. Rất tiếc là mình lỡ sử dụng transition của CSS3 nên trình duyệt cũ sẽ ko hiểu 8-}.

    JS
    PHP:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <
    script>
        $(
    document).ready(function(){
            var 
    0;
            var 
    0;
         
            function 
    wheel(dc)
            {
                var 
    = $('ul.play').children().length;
                var 
    12*c;
                
    setTimeout(function() {
                    $(
    'ul.play li:eq(' ')').addClass('active').siblings().removeClass('active');
                    $(
    '.result').html($('ul.play .active').html());
                    
    a++;
                    
    b++;
                    if (
    == e)
                        
    0;
                    if (
    f)
                        
    wheel(dc);             
                }, 
    d);
            }
         
            
    wheel(2004); 
        });
    </
    script>
    Mình đã sắp xếp lại code cho OOP tí :D. Khi gọi hàm wheel(d, c) để chạy, các bạn chỉ cần truyền 2 tham số:
    • d: thời gian delay tính theo ms
    • c: vị trí bạn muốn vòng xoay dừng lại
    Hiện tại nó xoay 5 vòng mới dừng, bạn nào muốn chỉnh sửa số vòng thì chỉnh ở var f = 12*5 + c;

    Kết quả
    [​IMG]


    Lưu ý (Notes)
    • Đây là các bước suy nghĩ của bản thân khi gặp vấn đề trên.
    • Đây là mô phỏng (demo) và mình sẽ implement code trên cho các dự án của công ty.
    • Nếu bạn nào có thắc mắc hay có thể tối ưu hóa nội dung trên, hãy chia sẻ bằng cách bình luận.
    • Hoàn toàn không có download, hãy tự xem thớt và copy.
    • Off-topic: đờ mờ bọn imageshack, bọn nó yêu cầu tài khoản nạp tiền mới upload đc ảnh :(

    ...
    anhtuan1006, Dương Đức SơnDinh Cuong thích bài viết này.
  2. mahu220

    mahu220 Thành viên cấp 2

    thêm chữ bắt đầu zới chữ dừng lại thì làm sao
  3. banbaonylong

    banbaonylong Ko phải assmin

    thêm hàm click mới chạy function wheel
  4. minhtamht

    minhtamht Banned

    Tuyệt vời
  5. Long Trần Quốc

    Long Trần Quốc Thành viên cấp 1

    ^^ rất hay và bổ ích
  6. Hay thiệt.. thánh nào nghĩ ra mấy đoạn code này cũng kinh dị thật
  7. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    cái này hay thiệt, mình đánh dấu lại để sau này học ..hi
  8. mrsontg

    mrsontg Mới đăng kí

    Hay thiệt đánh dấu

Ủng hộ diễn đàn