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

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.

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 a = 0;
        var b = 0;
        var c = 18 + 4 ;
        var length = $('ul.test2').children().length;
        function wheel()
        {
            setTimeout(function() {
                $('ul.test2 li:eq(' + a + ')').addClass('active').siblings().removeClass('active');
                a++;
                b++;
                if (a == length)
                    a = 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í


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

JS

PHP:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        var a = 0;
        var b = 0;
     
        function wheel(d, c)
        {
            var e = $('ul.play').children().length;
            var f = 12*5 + c;
            setTimeout(function() {
                $('ul.play li:eq(' + a + ')').addClass('active').siblings().removeClass('active');
                $('.result').html($('ul.play .active').html());
                a++;
                b++;
                if (a == e)
                    a = 0;
                if (b < f)
                    wheel(d, c);             
            }, d);
        }
     
        wheel(200, 4); 
    });
</script>

Mình đã sắp xếp lại code cho OOP tí . 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ả



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