用html+jq写一个产品放大镜代码
时间: 2023-03-21 14:00:57 浏览: 98
以下是一个简单的用 HTML 和 jQuery 实现产品放大镜的示例代码:
HTML 代码:
```html
<div class="product-image-container">
<img src="product-image.jpg" alt="Product Image" class="product-image">
<div class="zoom-container">
<img src="product-image.jpg" alt="Product Image" class="zoom-image">
</div>
</div>
```
CSS 代码:
```css
.product-image-container {
position: relative;
}
.zoom-container {
position: absolute;
top: 0;
left: 100%;
width: 200px;
height: 200px;
overflow: hidden;
}
.zoom-image {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 400px;
}
```
jQuery 代码:
```javascript
$(document).ready(function() {
var zoomContainer = $('.zoom-container');
var zoomImage = $('.zoom-image');
var productImage = $('.product-image');
zoomContainer.hide();
productImage.mouseenter(function() {
zoomContainer.show();
});
productImage.mousemove(function(e) {
var productImageOffset = productImage.offset();
var x = e.pageX - productImageOffset.left;
var y = e.pageY - productImageOffset.top;
var zoomImageWidth = zoomImage.width();
var zoomImageHeight = zoomImage.height();
var zoomContainerWidth = zoomContainer.width();
var zoomContainerHeight = zoomContainer.height();
var newX = (x / productImage.width()) * zoomImageWidth - zoomContainerWidth / 2;
var newY = (y / productImage.height()) * zoomImageHeight - zoomContainerHeight / 2;
if (newX < 0) {
newX = 0;
}
if (newX + zoomContainerWidth > zoomImageWidth) {
newX = zoomImageWidth - zoomContainerWidth;
}
if (newY < 0) {
newY = 0;
}
if (newY + zoomContainerHeight > zoomImageHeight) {
newY = zoomImageHeight - zoomContainerHeight;
}
zoomImage.css({
left: -newX,
top: -newY
});
});
productImage.mouseleave(function() {
zoomContainer.hide();
});
});
```
代码解释:
- 首先,HTML 代码包含了一个 `.product-image-container` 的 div 容器,包含了产品图片和放大镜容器两个 img 元素。
- CSS 代码中,使用了绝对定位来实现放大镜容器的浮动效果,同时隐藏了放大镜容器。
- jQuery 代码中,通过监听产品图片的 mouseenter、mousemove 和 mouseleave 事件来显示、移动和隐藏放大镜容器,并根据鼠标位置来计算放大镜中的图像显示位置。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)