Home » » Tạo một news ticker đơn giản bằng Jquery

Tạo một news ticker đơn giản bằng Jquery

Written By Unknown on Thứ Ba, 13 tháng 8, 2013 | 00:55

Ngồi không buồn buồn thử vọc jquery xem thế nào? Trình độ thuộc dạng gà nên có gì các cao thủ lượng thứ.
Kịch bản là như thế này: Bạn có một cô vợ, và  4 cô bồ, vậy để làm sao để cô vợ và những cô bồ của xuất hiện mà không thấy mặt nhau???

Giả pháp đưa ra: ;))) không biết có vẻ đường cho hươu chạy không nhỉ?
+ Khi vợ có mặt, ta tìm đường cho các bồ di tản.

+ Khi vợ có không có mặt, ta lại đi chơi với bồ 1, các em khác ta cho di tản cùng vợ :)), cứ thế ta đi chơi với bồ 2 rồi bồ 3, bồ 4, sau đó ta lại về với vợ, cuộc sống vẫn tiếp diễn vòng quay lại tiếp tục.

code:
html:
<ul id="sapxeplich">
<li>Vợ 1</li>
<li>Bồ 1</li>
<li>Bồ 2</li>
<li>Bồ 3</li>
<li>Bồ 4</li>
</ul>
Jquery
$('ul#sapxeplich li').hide();
$('ul#sapxeplich li:first').show();
$('ul#sapxeplich').each(function() { //ở đây dùng $(document).ready(function() { có lẽ hợp lý hơn
var gaptruoc= 0;
var thoigiandulich = 3000;  
function gaproichodidulich(){
 gaptruoc= $('ul#sapxeplich li:first').html();
$('ul#sapxeplich li:first')
.animate({opacity: 0},200).remove();
sapxeplichgapsau(gaptruoc);
}
function sapxeplichgapsau( gaptruoc){
$('ul#sapxeplich li').hide();
sapxepgapsau = ''+ gaptruoc+'';
$('ul#sapxeplich').append("<li>"+sapxepgapsau+"</li>");
$('ul#sapxeplich li:last')
.animate({opacity: 1},200);
}
interval = setInterval(gaproichodidulich, thoigiandulich);
});
Kết luận:
Nói chung là gà gà rứa thôi nhỉ :),
Tóm gà, trong cái ví dụ này cần xem lại các hàm sau:
1. hide()
2. show()
3. html()
4. append()
5. animate()
6. setInterval()
cách dùng:  first selector, last selector

Share this article :

0 nhận xét:

Đăng nhận xét

About

Điên điên khùng khùng


 
Support : Your Link | Your Link | Your Link
Copyright © 2013. Bạn và tôi cùng học - All Rights Reserved
Template Created by Creating Website Modified by CaraGampang.Com
Proudly powered by Blogger