»
EnglishFrenchVietnamese

Print - JavaScript DHTML Dock Carousel Using Mootools - JavaScriptBank.com

Full version: jsB@nk » Framework » MooTools » JavaScript DHTML Dock Carousel Using Mootools
URL: http://www.javascriptbank.com/javascript-dhtml-dock-carousel-using-mootools.html

JavaScript DHTML Dock Carousel Using Mootools © JavaScriptBank.comThis is an awesome navigation menu with an unique and eye-catching design, operated by the famous JavaScript framework, designed for the animations: MooTools. This navigation menu has the layout and features similar to DockBar in Mac OS: - The icons will be enlarged when you move the cursor pointer over it. - And shrink when the cursor pointer leaves. - Scrolling and fading features applied when you click for going to next icons. - The animation/motion effects are quite smooth when running.

Full version: jsB@nk » Framework » MooTools » JavaScript DHTML Dock Carousel Using Mootools
URL: http://www.javascriptbank.com/javascript-dhtml-dock-carousel-using-mootools.html



CSS
<link rel='stylesheet' href='slider.css' type='text/css' />


JavaScript
<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>


HTML
<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>


Files
/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