mooSlide dùng framwork mootools, dễ sử dụng và cấu hình.
Đây là một cách để bạn đưa ra các nội dung nổi bật, dùng cho hidden panel, thay Lightbox...
Chỉ với 1 dòng code bạn có thể lựa chọn:
- Trượt 1 thẻ div
- Chọn tốc độ trượt
- Chọn tốc độ mờ
- Gỡ bỏ bằng cách ấn nút yes / no
- Độ mờ sau cùng
- Chiều cao của slider
- Loại hiệu ứng sử dụng
- toggler element
- Trượt từ vị trí cho trước
Trước tiên, bạn cần add js vào file html của mình
<script language="javascript" src="js/mootools.js" type="text/javascript"></script>
<script language="javascript" src="js/mooSlide2.js" type="text/javascript"></script>
<script language="javascript" src="js/mooSlide2.js" type="text/javascript"></script>
Tạo box để slide:
var px = new mooSlide2({ slideSpeed: 1700, fadeSpeed: 500, toggler:'toggle', content:'test', height:250, removeOnClick: true, opacity:'1', effects:Fx.Transitions.Bounce.easeOut, executeFunction:'sayGoodbye()'});
Khai báo js trong trang HTML:
var px = new mooSlide2({ slideSpeed: 1700, fadeSpeed: 500, toggler:'toggle', content:'test', height:250, removeOnClick: true, opacity:'1', effects:Fx.Transitions.Bounce.easeOut, executeFunction:'sayGoodbye()'});
Để box tự động chạy bạn cần cho đoạn sau vào page load:
px.run();
Live demo (và hướng dẫn bằng tiếng anh) tại đây
Tài về tại đây, bản backup lưu trên vannyneo tại đây