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

[JS] Div tự động nhảy loi choi

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

Lượt xem: 2,719

  1. banbaonylong Ko phải assmin

    Hi các bạn, trong công việc của mình, có 1 số trang OnePage yêu cầu có một số hiệu ứng động khá vui mắt như trái banh tưng tưng trên trang web chẳng hạn.

    Hiệu ứng này mình cũng chả biết gọi tên nó là gì :-?, thôi cứ tạm gọi là "nhảy loi choi". Tự code "hướng đối tượng" cho dễ xài :D

    Bước 1: nhét thư viện jquery vào code của bạn
    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    Bước 2: Phần html đơn giản chỉ là 1 cái div
    PHP:
    <div class="div-1 div">1</div>
    Bước 3: CSS make-up cho nó sặc sỡ đồng bóng tí
    PHP:
            .div {
                
    displayblock;
                
    positionabsolute;
                
    width50px;
                
    height50px;
                
    line-height50px;
                
    colorwhite;
                
    font-weightbold;
                
    text-aligncenter;
            }
            .
    div-{         
                
    top50px;
                
    background-colorred;
                
    left500px;
            }
    Bước 4: Bây giờ là phần code js xử lí
    [​IMG]
    • Mình sử dụng 1 hàm của jquery là animation !
    • Hàm _vertical để thực hiện việc nhảy loi choi theo chiều dọc. Gồm 2 hàm con là _vertical_1 là hàm nhảy lên, _vertical_2 là hàm nhảy xuống :D. Hai hàm liên kết với nhau tạo hiệu ứng "nhảy loi choi".
    • Các tham số a là div muốn hiệu ứng nhảy, b là khoảng cách nhảy tính theo px, c là thời gian nửa chu kì nhảy tính theo ms (c càng cao tốc độ càng chậm)
    • Trong demo có thêm trường hợp nhảy ngang, :D.
    Bước 5: Kết quả
    [​IMG]

    Link demo: Here
    (Cảm ơn Đoilơ ViệtDesigner đã tài trợ hosting :">)

    ...
    Phạm Hữu Dư, Sorceress, dabeomoon1 người khác thích bài viết này.
  2. Thiên Ma

    Thiên Ma Lãng du VietDesigner

    Ghép face assmin vào cho sinh động :D
  3. Sorceress

    Sorceress Thành viên cấp 1

    Trò này demo sản phẩm cho khách hàng xem phải hay biết mấy =))
  4. banbaonylong

    banbaonylong Ko phải assmin

    :D đúng rồi, cái này show effect là chính cho page sinh động

    Thiên Ma thým thay background-color bằng background-image là đc :-"
  5. LocDao

    LocDao Banned

    về nhà chế biến thêm

Ủng hộ diễn đàn