Jquery mouseover 使用 ---图片放大功能

最新推荐文章于 2020-08-20 17:23:07 发布

尘_菜鸟开发

最新推荐文章于 2020-08-20 17:23:07 发布

阅读量927

点赞数 1

分类专栏： javaScript 文章标签： jquery css 图片

javaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript来创建一个跟随鼠标移动的图片提示框效果，包括具体的CSS样式设置及JavaScript交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css 样式

#tip {
        position: absolute;
        color: #333;
        display: none;
    }

    #tip s {
        position: absolute;
        top: 40px;
        left: -20px;
        display: block;
        width: 0px;
        height: 0px;
        font-size: 0px;
        line-height: 0px;
        border-color: transparent #BBA transparent transparent;
        border-style: dashed solid dashed dashed;
        border-width: 10px;
    }

    #tip s i {
        position: absolute;
        top: -10px;
        left: -8px;
        display: block;
        width: 0px;
        height: 0px;
        font-size: 0px;
        line-height: 0px;
        border-color: transparent #fff transparent transparent;
        border-style: dashed solid dashed dashed;
        border-width: 10px;
    }

    #tip .t_box {
        position: relative;
        background-color: #CCC;
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        bottom: -3px;
        right: -3px;
    }

    #tip .t_box div {
        position: relative;
        background-color: #FFF;
        border: 1px solid #ACA899;
        background: #FFF;
        padding: 1px;
        top: -3px;
        left: -3px;
    }

    .tip {
        width: 82px;
        height: 82px;
        border: 1px solid #DDD;
    }

JS 代码

var tip = 'tip';
    $(function() {
        $('.' + tip).mouseover(function() {
            var $tip = $('<div id="tip"><div class="t_box"><div><s><i></i></s><img width="500px" height="500px" src="' + this.src + '" /></div></div></div>');
            $('body').append($tip);
            $('#' + tip).show('fast');
        }).mouseout(function() {
            $('#' + tip).remove();
        }).mousemove(function(e) {
            $('#' + tip).css({
                "top": (e.pageY - 60) + "px",
                "left": (e.pageX + 30) + "px"
            });
        });
    });

html 代码

<a href="JavaScript:void(0);"><img width="500px" height="500px" class="tip" src="img/img.jpg" /></a>