锋利的jquery心得---图片提示效果_深美里奈-优快云博客

本文链接：https://blog.youkuaiyun.com/liulu961126/article/details/83823208

该博客展示了如何利用jQuery创建一个图片预览功能。当鼠标移到带有`tooltip`类的超链接上时，会在鼠标旁边显示图片。通过动态创建元素和调整位置，实现了图片在鼠标附近的实时预览。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.83.min.js"></script>
</head>
<body>
<ul>
    <li>
        <a href="../image/波多野结衣.jpg" class="tooltip" title="苹果"><img style="width: 100px;height: 200px"  src="../image/波多野结衣.jpg"></a>
    </li>
    <li>
        <a href="../image/深美里奈.jpg" class="tooltip" title="苹果"><img style="width: 100px;height: 200px" src="../image/深美里奈.jpg"></a>
    </li>
    <li>
        <a href="../image/立花瞳.jpg" class="tooltip" title="苹果"><img style="width: 100px;height: 200px" src="../image/立花瞳.jpg"></a>
    </li>
    <li>
        <a href="../image/吉泽明步.jpg" class="tooltip" title="苹果"><img style="width: 100px;height: 200px" src="../image/吉泽明步.jpg"></a>
    </li>
</ul>
</body>
<script>
    $(function () {
        var x=20;
        var y=30;
//自己实现预览功能
        //当鼠标移入超链接,获取图片值并创建元素添加到文档中,接着显示再鼠标旁边
        $("a.tooltip").mouseover(function (e) {
            var tooltips = $("<div id='tooltip' style='position:absolute;'><img style='width: 250px;height: 280px;' src='" + this.href + "' alt='产品预览图'/></div>");
            this.title = "";
            $("body").append(tooltips);
            $("#tooltip").css({"top":(e.pageY+y)+"px","left":e.pageX+"px"}).show("fast");
        }).mouseout(function () {
           $("#tooltip").remove();
        }).mousemove(function (e) {
           $("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});
        });
    });

</script>
</html>