鼠标悬停提示是一个网站中经常看到的效果,也是非常实用的功能。通常由于网站布局的原因没法放那么大的图片而又希望能看到高清的效果,这时鼠标悬停时图片局部放大将带好良好的体验。下面是我写的一段代码用于实现这个功能,跟大家分享,也方便日后自己使用,拿来即用。
var x = 10,y = 20;
$('a.tooltip').mouseover(function(e){
var imgTitle,tooltip;
this.myTitle = this.title; //得到当前url的title
this.title = '';
imgTitle = this.myTitle ? '
' + this.myTitle :'';
tooltip = '';
$('body').append(tooltip); //插入id为tooltip的div
$('#tooltip').css({
'left': (e.pageX + x) + 'px',
'top': (e.pageY + y) + 'px'
}).show('fast');
}).mouseout(function(){
this.title = this.myTitle;
$('#tooltip').remove();
}).mousemove(function(e){
$('#tooltip').css({
'left': (e.pageX + x) + 'px',
'top': (e.pageY + y) + 'px'
});
});