I'm starting to provide Chinese / English versions of some posts, switch with the Language menu above. 我开始提供部分文章的中文、英文翻译,请使用顶部语言菜单切换。

鼠标移过图片放大显示效果

鼠标移过图片放大显示效果 - Original by Maomihz, Modified by Lan Tian

昨天晚上 Maomihz 让我帮他改一段 jQuery,实现鼠标移上去自动显示高清大图的效果。一开始有两个 Bug,一个是鼠标移到大图框上时,大图会闪来闪去,另一个就是图片会超出屏幕上边界。

我的修改, 就是把大图放到小图底下去,然后给小图设定半透明效果。超出上边界的判断非常容易,写了个 max 函数就搞定了。

下面放 jQuery:

$(function(){
    var x = 22;
    var y = 540;
    var a = 0;

    $("a.smallimage").hover(function(e){
        if(a == 0){$("body").append('<div id="bigimage"><img src="'+ this.rel + '" alt="" /></div>');
        a = 1;}
        widthJudge(e);
        $("a.smallimage").fadeTo(300,0.3);
        $("#bigimage").fadeIn(300);
    },function(){
        $("#bigimage").fadeOut(300);
        $("a.smallimage").fadeTo(300,1);
    });

    $("a.smallimage").mousemove(function(e){
        widthJudge(e);
    });
    function max(a,b){if(a>b){return a;}else{return b;}}
    function widthJudge(e){
        var marginRight = document.body.clientWidth - e.pageX; 
        var imageWidth = $("#bigimage").width();
if(marginRight < imageWidth)
        {
            $("#bigimage").css({top:(max(e.pageY - y,22)) + 'px',left:(document.body.clientWidth - imageWidth + x ) + 'px'});
        }else{
            x = -22;
            $("#bigimage").css({top:(max(e.pageY - y,22)) + 'px',left:(e.pageX + x ) + 'px'});
        };
    }
});

对应的 CSS:

.smallimage{position:relative;z-index:3}
#bigimage { position:absolute;z-index:2;}
#bigimage img { height:500px; padding:5px; background:#fff; border:1px solid #e3e3e3;}

网页调用方法:

<div class="imgls">![small.jpg" rel="img0.jpg" class="smallimage"><img src="small](small.jpg" rel="img0.jpg" class="smallimage"><img src="small.jpg)</div>

截图:

特效截图

下载:(用的是 Win8 那两朵花)

样例包

中考第二天
下一篇文章 »

本站使用运行在 Vercel 上的 Waline 评论系统,中国大陆访问可能不稳定。