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>