Horizontal Tooltips Menu Tutorials

这个插件称不上完美，类似之前发过的lava菜单效果，只是把滑动平移的效果移植到提示层上。但调用还算颇为简单，值得一用。

使用方法：

<div id="menu">
<ul>
<li><a href="#"><img src="user.png" width="32" height="32" alt="My Profile" title=""/></a></li>
<li><a href="#"><img src="photo.png" width="32" height="32" alt="Photo Gallery" title=""/></a></li>
<li><a href="#"><img src="bookmark.png" width="32" height="32" alt="Social Bookmarking Tools" title=""/></a></li>
<li><a href="#"><img src="rss.png" width="32" height="32" alt="RSS" title=""/></a></li>
<li><a href="#"><img src="search.png" width="32" height="32" alt="Search" title=""/></a></li>
<li class="selected"><a href="#"><img src="setting.png" width="32" height="32" alt="Control Panel" title=""/></a></li>
</ul>
<div id="box"><div class="head"></div></div>
</div>

$(document).ready(function () {
var style = 'easeOutExpo';
var default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
var default_top = $('#menu li.selected').height();
//设置提示层的默认位置和提示文本
$('#box').css({left: default_left, top: default_top});
//获取图片的alt属性
$('#box .head').html($('#menu li.selected').find('img').attr('alt'));
//触发hover事件
$('#menu li').hover(function () {
left = Math.round($(this).offset().left - $('#menu').offset().left);
//显示当前文本
$('#box .head').html($(this).find('img').attr('alt'));
$('#box').stop(false, true).animate({left: left},{duration:500, easing: style});
//当用户单击菜单所触发的事件
}).click(function () {
//reset the selected item
$('#menu li').removeClass('selected');
//select the current item
$(this).addClass('selected');
});
//鼠标离开菜单，重置提示层
$('#menu').mouseleave(function () {
default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
//重新显示默认的提示文本以及默认提示层的位置
$('#box .head').html($('#menu li.selected').find('img').attr('alt'));
$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});
});
});

跟作者说两句