首先非常感谢网友信的无私分享，此作品实现了水平方向提示jquery插件ToolTip，主要配合jquery动画插件jquery.easing使用，都是用jquery的基础代码编写的，注释写得非常详细，Tooltip（工具提示）虽然实现起来比较简单，但却是网站中必不可少的功能，可以让迅速的满足用户的需要，提升用户体验。免去用户进行错误的操作，提升用户的粘度。
jquery核心代码如下：
$(document).ready(function() {
//初始化动画
//想查看更多的动画效果，可以去查看http://gsgd.co.uk/sandbox/jquery/easing/
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
});
$('#box .head').html($('#menu li.selected').find('img').attr('alt'));
//如果鼠标悬停在 menu
$('#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
});
//如果用户单击在 menu
}).click(function() {
$('#menu li').removeClass('selected');
$(this).addClass('selected');
});
//如果鼠标已开，将复位
$('#menu').mouseleave(function() {
//get the left pos
default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
//Set it back to default position and text
$('#box .head').html($('#menu li.selected').find('img').attr('alt'));
$('#box').stop(false, true).animate({
left: default_left
},
{
duration: 1500,
easing: style
});
});
});
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友信 jquery插件 ToolTip 消息提示 气泡提示 提示插件 弹出层 动画插件 jquery.easing 鼠标特效 鼠标悬浮 悬停特效