素材网 素材网

jquery鼠标滑过水平方向弹出提示信息插件ToolTip

下载资源()次

阅读次数()次

发布时间:2014-05-05

jquery鼠标滑过水平方向弹出提示信息插件ToolTip
分享到:

用法简介:

来源:xw素材网

jquery鼠标滑过水平方向弹出提示信息插件ToolTip。
文件引用:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript">
$(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}); 
 
});
});
</script>

   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。