前一篇:jquery使用remove()方法删除指定class子元素后一篇:jQuery使用post方法提交数据实例

Jquery实现鼠标移动放大图片功能实例

	作者：CC	今阅(1)	3日(1)	7日(2)
	发表时间:2024-04-22 10:08:34		30日(2)	总阅(23)

文章摘要：下面是一个简单的示例，演示如何使用jquery实现鼠标移动放大图片的功能：请将`your_image.jpg`替换为您要放大的图片的url，这段代码会在鼠标移动到图片上时放大图片，鼠标移出时恢复原始大小

下面是一个简单的示例，演示如何使用 jQuery 实现鼠标移动放大图片的功能：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放大图片</title>
<style>
    #container {
        position: relative;
        display: inline-block;
    }
    #image {
        position: absolute;
        transition: transform 0.5s;
    }
</style>
</head>
<body>

$("#container").mouseleave(function() {
            $("#image").css("transform", "none");
        });
    });
</script>

</body>
</html>
```

请将 `your_image.jpg` 替换为您要放大的图片的 URL。这段代码会在鼠标移动到图片上时放大图片，鼠标移出时恢复原始大小。

前一篇:jquery使用remove()方法删除指定class子元素后一篇:jQuery使用post方法提交数据实例