Phiên bản đầy đủ: jsB@nk » Framework » MooTools » Trình đơn định hướng kiểu Carousel dùng Mootools
URL: https://www.javascriptbank.com/javascript-dhtml-dock-carousel-using-mootools.html
Một trình đơn định hướng cực kì độc đáo và bắt mắt trên trang web sử dụng thư viện JavaScript chuyên dùng cho các hoạt hóa là MooTools, trình đơn định hướng này có giao diện và cách hoạt động tương tự như thanh DockBar trên các máy hệ Mac với các đặc điểm: - Các biểu tượng sẽ phóng to khi ta rê con trỏ chuột vào - và thu nhỏ lại khi con trỏ chuột rời đi. - Tính năng cuộn và mờ dần khi di chuyển sang các biểu tượng khác. - Các hiệu ứng được thực hiện khá mượt.
Phiên bản đầy đủ: jsB@nk » Framework » MooTools » Trình đơn định hướng kiểu Carousel dùng Mootools
URL: https://www.javascriptbank.com/javascript-dhtml-dock-carousel-using-mootools.html
<link rel='stylesheet' href='slider.css' type='text/css' />
<script src="mootools-12-core.js" type="text/javascript"></script><script src="mootools-12-more.js" type="text/javascript"></script><script src="dock.js" type="text/javascript"></script>
<div id="stage-container"><p class="text"><img src="text.gif" alt="image" width="111" height="24" /></p> <br clear="all"/><a href="#" id="moveleft">Left</a><a href="#" id="moveright">Right</a><div id="wrapper"><ul id="items"><li><a><img class="icon" src="1.png" alt="image" width="32" height="32" /></a></li><li><a><img class="icon" src="2.png" alt="image" width="32" height="32" /></a></li><li><a><img class="icon" src="3.png" alt="image" width="32" height="32" /></a></li><li><a><img class="icon" src="4.png" alt="image" width="32" height="32" /></a></li><li><a><img class="icon" src="5.png" alt="image" width="32" height="32" /></a></li><li><a><img class="icon" src="10.png" alt="image" width="32" height="32" /></a></li><li><a><img class="icon" src="6.png" alt="image" width="32" height="32" /></a></li><li><a><img class="icon" src="7.png" alt="image" width="32" height="32" /></a></li><li><a><img class="icon" src="8.png" alt="image" width="32" height="32" /></a></li><li><a><img class="icon" src="9.png" alt="image" width="32" height="32" /></a></li></ul></div></div>
/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/1.png/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/10.png/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/2.png/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/3.png/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/4.png/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/5.png/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/6.png/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/7.png/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/8.png/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/9.png/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/dock.js/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/left.gif/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/mootools-12-core.js/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/mootools-12-more.js/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/right.gif/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/slider.css/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/stage2.jpg/javascript/framework/JavaScript_DHTML_Dock_Carousel_Using_Mootools/text.gif
