google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






Hướng dẫn tạo trình đơn định hướng kiểu Carousel dùng MooTools 2 Một trình đơn định hướng khá độc đáo và bắt mắt trên nền web, vừa được giới thiệu trên jsB@nk, để xem ví dụ, bạn vui lòng nhấn vào Trình đơn định hướng kiểu Carousel dùng Mootools.

Vì đây là bài hướng dẫn rất chi tiết nên được tác giả chia làm hai phần, và đây là phần cuối.


Miễn phí web hosting 1 năm đầu tại iPage



Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

This tutorial is the second part of a tutorial that will build a javascript carousel that imitates the Mac OS X dock. In part one, we build a mock up in Photoshop and exported the nessecary images. In this part, we’ll take those images and build it into a HTML & CSS. Then we’ll use javascript to make if interact.

Demo Files

Step 1: The HTML To keep things organized, we’ll seperate the files into there own folders. So we’ll have a “js” folder to keep all the Javascript files, an “images” folder to hold all the webpage images, and a “icons” folder to hold the icon images. What needs to be in the HTML? Well, the links to move the stage left and right, the stage and all the icons and finally the text image. The “wrapper” class you will see later enables the icons on the next slide to hide. The icons are there own list elements.

Javascript applications run better with specialized Java hosting. It ensures smooth, error free work of Java based websites or any Java script for that matter.
<div id="stage-container">
  <img src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/images/text.gif" alt="image" width="111" height="24" />
  <a id="moveleft">Left</a>

  <a id="moveright">Right</a>
  <div id="wrapper"><ul id="items">
  <li><a><img src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/icons/1.png" alt="image" width="32" /></a></li>

  <li><a><img src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/icons/2.png" alt="image" /></a></li>
  <li><a><img src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/icons/3.png" alt="image" /></a></li>
  <li><a><img src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/icons/4.png" alt="image"/></a></li>

  <li><a><img src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/icons/5.png" alt="image" /></a></li>
  <li><a><img src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/icons/10.png" alt="image"/></a></li>
  <li><a><img src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/icons/6.png"/></a></li>

  <li><a><img src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/icons/7.png"/></a></li>
  <li><a><img src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/icons/8.png" /></a></li>
  <li><a><img src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/icons/9.png" /></a></li>

  </ul></div>
 </div>

Now lets set up the header of the HTML document. We wan’t an XHTML tranistional document so that all the javascript is compliant and works. We need to reference the Mootools library, and the javascript that makes the stage work as well as the css file. We’ll deal with getting those files later.

<script src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/js/mootools-12-core.js" type="text/javascript"><!--mce:0--></script> <!-- MOOTOOLS 1.2  -->

<script src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/js/mootools-12-more.js" type="text/javascript"><!--mce:1--></script> <!-- MOOTOOLS 1.2  -->
<script src="/javascript/article/How_to_Create_JavaScript_Dock_Carousel_Using_Mootools_part_2/js/dock.js" type="text/javascript"><!--mce:2--></script> <!--   IMAGE GALLERY   -->

Step 2: The CSS The trickiest part of the CSS is understanding the fact that we’re making the ul extend beyond the ‘div id=”wrapper”‘. The image below explains how the tags appear with the CSS. The ul element extends because the class “items” has a width of 5000px, and the “wrapper” id has an overflow of hidden. The buttons are floated on either side of the stage, and the text is hidden with the text-indent attribute. To get a tag to conform to specified widths and heights, we use the ‘display: block’ attribute.

image
body{
background:#232323;
color:white;
}
#stage-container{
margin: 50px auto;
width: 420px;
}
#stage-container .text{text-align: center;}
#stage-container a{outline: none;}
/* - STAGE - */
#stage-container #wrapper{
overflow:hidden;
margin: 0px auto;
width:352px;
height:55px;
background: url(images/stage2.jpg);
position: relative;
}
#stage-container #items{
margin:0px;
padding:0px 6px;
list-style:none;
width:5000px;
position: relative;
}
#stage-container #items li{
float:left;
list-style:none;
margin-right:5px;
padding: 6px 6px;
margin-top: 5px;
}
/* - BUTTONS - */
#stage-container #moveleft{
float: left;
background: url(images/left.gif);
}
#stage-container #moveright{
background: url(images/right.gif);
float: right;
}
#stage-container #moveright,#moveleft{
height: 20px;
width: 20px;
display: block;
z-index: 10;
text-indent: -3000em;
margin-top: 18px;
}

Step 3: The Javascript First, we’ll be using the newly released Mootools 1.2 for this javascript. Mootools is a “compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.” We’ll be utilizing the scroller class and the Fx classes to achieve the entire effects on the icons. Like almost all mootools scripts, we need to enclose the javascript in a dom ready action. What this does is not let the javascript work until all the javascript is completely loaded by the user.

window.addEvent(’domready’, function() {
// Your code here
});

The first part of javascript just deals with moving the stage left and right. We need to tell the javascript where to slide the stage, if it can slide the stage left or right and how much to slide. When a button is clicked it triggers an event to move the slide left or right depending on which is clicked. The slides must figure out though if it can move left or right. We don’t want to move left if there is no icons to the left of the current slide. These issues are what the variables at the top of the javascript deal with.

The image in step 2 will help illustrated how the javascript is working. The unordered list element (ul id=”items”) is being shifted left and right by the javascript (thats why is larger than the stage). The shift is triggered by a hyperlink tag (’a').

var slides = 2; // CHANGE THIS TO THE NUMBER OF SLIDES
var pos = 0; // default setting, start at the first(0) pixel
var offset = 346; // How many pixels the slider should move to get to the next slide
var currentslide = 1; // first slide is the default slide
var items = $('items'); // items variable for the id 'items' in the html
var fx = items.effects({
duration: 800,
transition: Fx.Transitions.linear
}); // the way the items transition is described here
/* Scroll Object Initialized */
var scroll = new Fx.Scroll('wrapper', {
offset:{'x':0, 'y':0},
transition: Fx.Transitions.Elastic.easeOut
}); // the scroll stage is set up here, and each movement will be 'Elastic'
// other tranistions could be linear, quadratic, ect.
/* Trigger to move the slide left */
//when the #moveleft link is clicked, this tells the scroll to move left
$('moveleft').addEvent('click', function(event) {
event = new Event(event).stop(); // don't go to the actual link described in the href
if(currentslide == 1) return; // can't go more left than the first
currentslide--; // currentslide is one less than before
pos += -(offset); // slide the stage left by the offset's size
/* lower the opactiy, slide, then raise back opacity */
fx.start({
'opacity': .3 // the opacity of the icons will become 30 %
}).chain(function(){
this.start.delay(800, this, { 'opacity': 1 }); // bring the icons back to 100% opacity
scroll.start(pos); // move the stage to the new position
});
});
$('moveright').addEvent('click', function(event) {
event = new Event(event).stop();
if(currentslide >= slides) return;
currentslide++;
pos += offset;
fx.start({
'opacity': .3
}).chain(function(){
this.start.delay(800, this, { 'opacity': 1 });
scroll.start(pos);
});
});
scroll.toLeft(); // We'll initalize the stage to left most position
Javascript Visual of Events

The next part of the Javascript strictly deals with what happens when you move the cursor over an icon. We want to make the icon bigger. When the cursor leaves the icon, we need to readjust the icon to different size settings.

$$('.icon').each(function(item){  // for each icon, apply the follow events
item.addEvent('mouseover', function(event) { // when the icon is moused over, enlarge it
var fx2 = item.effects({
duration: 200,
transition: Fx.Transitions.linear
}); // initialize the icon transition properties
fx2.start({
'width': 40,
'height':40,
'margin-top': '-2',
'margin-left': '-5'
});
});
item.addEvent('mouseleave', function(event) { // when the icon is left by the mouse, reset icon
var fx2 = item.effects({duration: 200, transition: Fx.Transitions.linear });
fx2.start({
'width': 32,
'height':32,
'margin-top': '0',
'margin-left': '0'
});
});
});

Conclusion Thats all that’s need to create a dock carousel. The icons in the demo are kindly provided by Jonas Rask and Devin Ross. I’ve implemented the dock in the resources section of Tutorial Dog were you can download icons that I’ve created.

iPhoneKer.com
Save up to 630$ when buy new iPhone 15

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

JavaScript theo ngày


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web