您的位置:小众博客 > 网站运营 > 正文

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

2015年07月28日 / 网站运营 / 3391人阅读(点这评论)

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

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'
    });
});
ABOUT
七牛云存储 衡天主机
一灯学堂,专注互联网前端培训 特卖
最新文章
月度热门
热门话题