jquery图片等比例缩放特效实例代码实例
- 建站教程
- 2024-10-11 19:18:02
jquery图片等比例缩放特效实例代码(jquery仿QQ商城焦点图滚动特效实例代码)
基于jquery的图片等比例左右垂直居中缩放插件。jquery特效,jquery下载。
首先，我们需要创建一个HTML文件，包含一个图片容器和一个图片元素。然后，我们将使用jQuery来实现图片的等比例缩放和居中显示。
1. 创建HTML文件：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片等比例缩放特效实例代码</title>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform-origin: center;
}
</style>
</head>
<body>
<div>
<img src="your-image-url" alt="图片">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="main.js"></script>
</body>
</html>
```
2. 创建JavaScript文件（main.js）：
```javascript
$(document).ready(function () {
function scaleImage() {
var containerWidth = $('.container').width();
var containerHeight = $('.container').height();
var imageWidth = $('img').width();
var imageHeight = $('img').height();
var scale = Math.min(containerWidth / imageWidth, containerHeight / imageHeight);
$('img').css({
'width': imageWidth scale,
'height': imageHeight scale,
'margin-left': -imageWidth scale / 2,
'margin-top': -imageHeight scale / 2
});
}
scaleImage();
$(window).on('resize', function () {
scaleImage();
});
});
```
这个示例中，我们首先获取容器的宽度和高度，然后计算图片的缩放比例。接着，我们根据缩放比例设置图片的宽度、高度和边距，使其在容器中保持等比例缩放和居中显示。最后，我们监听窗口大小变化事件，以便在窗口大小改变时重新计算并应用缩放比例。
jquery仿QQ商城焦点图滚动特效，jquery弹出层特效 支持拖动，可调整导航大小的jQuery特效，jquery敲打空格键播放特效，
jquery图片等比例缩放特效实例代码实例由讯客互联建站教程栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“jquery图片等比例缩放特效实例代码实例”
