<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery滚动图片特效</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
h1 {
text-align: center;
color: #333;
}
.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.image-item {
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
position: relative;
}
.image-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.image-item:hover img {
transform: scale(1.1);
}
.controls {
text-align: center;
margin: 20px 0;
}
button {
padding: 10px 20px;
margin: 0 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.special-link {
display: block;
text-align: center;
margin: 30px 0;
color: #ff6600;
font-weight: bold;
text-decoration: none;
}
.special-link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery滚动图片特效</h1>
<div class="controls">
<button id="add-image">添加图片</button>
<button id="remove-image">移除图片</button>
</div>
<div class="image-gallery" id="gallery"></div>
</div>
<script>
$(document).ready(function() {
// 图片数组
const images = [
'https://picsum.photos/200/300?random=1',
'https://picsum.photos/200/300?random=2',
'https://picsum.photos/200/300?random=3',
'https://picsum.photos/200/300?random=4',
'https://picsum.photos/200/300?random=5',
'https://picsum.photos/200/300?random=6',
'https://picsum.photos/200/300?random=7',
'https://picsum.photos/200/300?random=8'
];
let currentIndex = 0;
// 添加图片函数
function addImage() {
if (currentIndex < images.length) {
const imgUrl = images[currentIndex];
const $imageItem = $('<div class="image-item"><img src="' + imgUrl + '" alt="随机图片"></div>');
// 初始状态（用于动画）
$imageItem.css({
opacity: 0,
transform: 'scale(0.5)'
});
$('#gallery').append($imageItem);
// 动画效果
$imageItem.animate({
opacity: 1,
transform: 'scale(1)'
}, 300);
currentIndex++;
} else {
alert('所有图片已添加完毕！');
}
}
// 移除图片函数
function removeImage() {
const $gallery = $('#gallery');
if ($gallery.children().length > 0) {
const $lastImage = $gallery.children().last();
// 动画效果
$lastImage.animate({
opacity: 0,
transform: 'scale(0.5)'
}, 300, function() {
$(this).remove();
currentIndex--;
});
} else {
alert('没有图片可移除了！');
}
}
// 按钮事件
$('#add-image').click(addImage);
$('#remove-image').click(removeImage);
// 初始加载3张图片
for (let i = 0; i < 3; i++) {
addImage();
}
// 滚动事件 - 滚动到底部自动加载图片
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
addImage();
}
});
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
