jquery 鼠标移动显示图片

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以轻松地实现复杂的 JavaScript 功能。

类型

jQuery 事件主要有以下几种类型：

鼠标事件：click, mouseover, mouseout, mousemove 等。
键盘事件：keydown, keyup, keypress 等。
表单事件：submit, change, focus, blur 等。
文档/窗口事件：load, unload, resize, scroll 等。

应用场景

在网页开发中，jQuery 经常用于实现动态效果和交互功能。例如，通过鼠标移动显示图片的功能，可以增强用户体验。

示例代码

以下是一个使用 jQuery 实现鼠标移动显示图片的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Mouse Move Show Image</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #image-container {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
        }
        #image {
            position: absolute;
            display: none;
        }
    </style>
</head>
<body>
    <div id="image-container">
        <img id="image" src="path/to/your/image.jpg" alt="Hover Image">
    </div>

    <script>
        $(document).ready(function() {
            $('#image-container').mousemove(function(event) {
                var containerOffset = $(this).offset();
                var x = event.pageX - containerOffset.left;
                var y = event.pageY - containerOffset.top;

                $('#image').css({
                    'left': x,
                    'top': y
                }).show();
            });

            $('#image-container').mouseleave(function() {
                $('#image').hide();
            });
        });
    </script>
</body>
</html>