Cấp bậc tác giả:

HTML

Chuyển động hình ảnh liên tục bằng JavaScript

Được viết bởi webmaster ngày 12/04/2016 lúc 02:12 PM
Trong ví dụ này, tôi sẽ chỉ cho bạn cách để làm động phần tử và làm cho nó chuyển động lên xuống vô hạn. Với sự giúp đỡ của jQuery.
  • 0
  • 3268

Chuyển động hình ảnh liên tục bằng JavaScript



Trong ví dụ này, tôi sẽ chỉ cho bạn cách để làm động phần tử và làm cho nó chuyển động lên xuống vô hạn. Với sự giúp đỡ của jQuery.

<!-- Example element -->
<img id="floating-banner" src="/* some image */" />
 
<!-- CSS to make it "float" -->
<style>
#floating-banner{
    position:absolute;
    top:20px;
    left:20px;
}
</style>

Javascript

 
<script type="text/javascript">
        $(window).on('load', function() {
        var canvasHeight = $(window).height();
        var floatingBanners = $("#floating-banner");
        var imageHeight = floatingBanners.height();
        var lowerBound = canvasHeight - imageHeight;
        var duration = 10000;

        function bannerMoveDown() {
            $("#floating-banner").animate({ top: lowerBound }, duration, 'linear', bannerMoveUp);
        }
        function bannerMoveUp() {
            $("#floating-banner").animate({ top: 0 }, duration, 'linear', bannerMoveDown);
        }
        bannerMoveDown();
    }); //]]>
    </script>

Bằng cách nào để sử dụng?

Trong CSS, tôi thiết lập phần tử (IMG) đến vị trí tuyệt đối để nó "float up" và tách khỏi bố trí bình thường. Chúng ta có thể di chuyển hình ảnh lên xuống bằng cách thay đổi các thuộc tính CSS "top".
Trong Javascript, chúng ta định nghĩa hai chức năng, bannerMoveDown() và bannerMoveUp(). Trong mỗi chức năng, chúng ta sử dụng các phương thức jQueryanimate() để làm động phần tử IMG.

Cuối cùng, chúng ta gọi bannerMoveDown() để bắt đầu vòng lặp động.

Nhớ sử dụng thư viện: 
<script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML