Tạo nội dung trượt với Blockster
Blockster - plugin nhỏ sử dụng jQuery giúp chúng ta tạo ra các featured content với hiệu ứng chuyển động tương đối đẹp.
Blockster hoạt động khá đơn giản. Nó sẽ tự lấy ra các thẻ <div> con bên trong một thẻ <div> cha và lần lượt hiển thị theo thứ tự. Tuy nhiên Blockster cho phép chỉnh cấu hình để hiển thị ngẫu nhiên.
Cách sử dụng :
Các chuyển động được tùy chỉnh bằng việc định nghĩa ra số lượng của dòng và cột, tốc độ. Đầu tiên ta phải có jQuery vào bỏ vào thẻ <head> theo cách sau ( vì trong plugin có đoạn google.setOnLoadCallback(function() { nên bạn phải gọi jQuery qua google jsapi ):
<script type="text/javascript" src="http://www.google.com/jsapi">
</script><script type='text/javascript'>google.load('jquery', '1.4.2');</script>
<script type="text/javascript" src="blockster.js"></script>
<script type='text/javascript'>
google.setOnLoadCallback(function() {
blockster({
// #featureRotator_1 là thẻ div cha
holder: '#featureRotator_1',
// bạn có thể tùy chỉnh rows và cols
rows: 4,
cols: 6
});
});
</script>Mã HTML:
<div id='featureRotator_1' class='featureRotator'> <div class='fr_slide1'> <div> <h5>Mitya likes jQuery</h5> <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah - <a href='#'>read more</a></p> </div> </div> <div class='fr_slide2'> <div> <h5>Mitya likes GD</h5> <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah - <a href='#'>read more</a> </p> </div> </div> <div class='fr_slide3'> <div> <h5>Mitya likes Mootools</h5> <p>Blah blah blah blah blah blah blah blah blah blah - <a href='#'>read more</a></p> </div> </div> </div>
Mã CSS:
.featureRotator { width: 400px; height: 240px; position: relative; border: solid 1px #aaa; margin: 0 auto; }
.featureRotator div { position: absolute; width: 400px; height: 240px; background-repeat: no-repeat; }
.fr_slide1 { background: url('../imgs/scriptDemos/blockster/slide1.jpg'); }
.fr_slide2 { background: url('../imgs/scriptDemos/blockster/slide2.jpg'); }
.fr_slide3 { background: url('../imgs/scriptDemos/blockster/slide3.jpg'); }
.featureRotator div div { height: 84px; bottom: 0; }
.featureRotator div div a { font-weight: bold; font-style: italic; font-size: 13px; color: #2085bd; }
.featureRotator div div h5 { color: #333; margin-top: 8px !important; text-indent: 20px; }
.featureRotator div div p { color: #333; margin-top: 5px; font-size: 13px; margin-left: 20px; width: 80%; }
.fr_slide1 div h5, .fr_slide1 div p { color: #fff !important; }
.fr_slide3 div p { width: 60% !important; }
Ngoài ra Blockster còn có một số tùy chỉnh nhỏ nữa. Bạn có thể xem tại đây
