用jQuery写一个放大镜
时间: 2023-03-28 14:01:20 浏览: 67
好的,我可以回答这个问题。以下是一个简单的jQuery放大镜的代码示例:
HTML代码:
```
<div class="container">
<img src="image.jpg" alt="Product Image">
<div class="magnifier"></div>
</div>
```
CSS代码:
```
.container {
position: relative;
}
.magnifier {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #ccc;
display: none;
pointer-events: none;
}
```
jQuery代码:
```
$(document).ready(function() {
$(".container").mousemove(function(e) {
var magnifier = $(".magnifier");
var image = $(this).find("img");
var magnifierWidth = magnifier.width();
var magnifierHeight = magnifier.height();
var imageWidth = image.width();
var imageHeight = image.height();
var offsetX = e.pageX - $(this).offset().left - magnifierWidth / 2;
var offsetY = e.pageY - $(this).offset().top - magnifierHeight / 2;
var ratioX = imageWidth / magnifierWidth;
var ratioY = imageHeight / magnifierHeight;
magnifier.css({
left: offsetX,
top: offsetY,
backgroundPosition: (-offsetX * ratioX) + "px " + (-offsetY * ratioY) + "px"
});
}).hover(function() {
$(".magnifier").show();
}, function() {
$(".magnifier").hide();
});
});
```
这个代码会在鼠标移动到图片上时显示一个放大镜,并根据鼠标位置在放大镜中显示对应的放大图像。