鼠标悬停时网页图片放大的JS代码

鼠标悬停提示是一个网站中经常看到的效果,也是非常实用的功能。通常由于网站布局的原因没法放那么大的图片而又希望能看到高清的效果,这时鼠标悬停时图片局部放大将带好良好的体验。下面是我写的一段代码用于实现这个功能,跟大家分享,也方便日后自己使用,拿来即用。

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'
    });
});

版权声明:本站部分文章为网络转载,文章结尾已注明出处,如侵犯您的权益请联系我们删除。

联系我们:turbochao@126.com

ZblogPHP 7月28修复一处权限绕过的新漏洞