项目一:模态框(Modal Box)
概述
模态框是一种常见的交互元素,用于展示重要信息或表单。本项目中,我们将使用jQuery实现一个响应式模态框。
实现步骤
- HTML结构:创建一个模态框的HTML结构,包括背景遮罩和内容区域。
- CSS样式:设置模态框的样式,包括位置、大小、阴影等。
- jQuery脚本:使用jQuery来控制模态框的显示和隐藏。
<!-- HTML -->
<button id="openModal">打开模态框</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>这里是模态框内容</p>
</div>
</div>
<!-- CSS -->
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#openModal").click(function() {
$("#myModal").show();
});
$(".close").click(function() {
$("#myModal").hide();
});
});
</script>
项目二:轮播图(Carousel)
概述
轮播图用于展示多张图片或内容,本项目中我们将使用jQuery实现一个简单的图片轮播效果。
实现步骤
- HTML结构:创建一个轮播图的HTML结构,包括图片容器和指示器。
- CSS样式:设置轮播图的样式,包括图片大小、位置、指示器样式等。
- jQuery脚本:使用jQuery来实现图片的自动播放和手动切换。
<!-- HTML -->
<div id="carousel" class="carousel">
<div class="carousel-slide">
<img src="image1.jpg" alt="图片1">
</div>
<div class="carousel-slide">
<img src="image2.jpg" alt="图片2">
</div>
<div class="carousel-slide">
<img src="image3.jpg" alt="图片3">
</div>
<a class="prev" onclick="moveSlide(-1)">❮</a>
<a class="next" onclick="moveSlide(1)">❯</a>
</div>
<!-- CSS -->
.carousel {
position: relative;
max-width: 600px;
margin: auto;
}
.carousel-slide {
display: none;
width: 100%;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0,0,0,0.8);
}
<!-- jQuery -->
<script>
var slideIndex = 1;
showSlide(slideIndex);
function moveSlide(n) {
showSlide(slideIndex += n);
}
function showSlide(n) {
var i;
var slides = document.getElementsByClassName("carousel-slide");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
</script>
项目三:响应式导航栏(Responsive Navigation Bar)
概述
响应式导航栏能够根据屏幕尺寸自动调整其布局。本项目中,我们将使用jQuery实现一个响应式导航栏。
实现步骤
- HTML结构:创建一个导航栏的HTML结构,包括菜单项和汉堡按钮。
- CSS样式:设置导航栏的样式,包括位置、大小、菜单项样式等。
- jQuery脚本:使用jQuery来控制导航栏的响应式行为。
<!-- HTML -->
<nav class="navbar">
<a href="#" class="logo">Logo</a>
<button class="hamburger">☰</button>
<ul class="nav-links">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
<!-- CSS -->
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
padding: 10px;
}
.logo {
font-size: 24px;
}
.hamburger {
display: none;
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
}
.nav-links {
display: flex;
}
.nav-links li {
list-style: none;
margin-left: 20px;
}
.nav-links li a {
color: white;
text-decoration: none;
}
/* Responsive */
@media (max-width: 768px) {
.hamburger {
display: block;
}
.nav-links {
display: none;
}
.nav-links.active {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background-color: #333;
position: absolute;
top: 100%;
}
.nav-links li {
margin: 10px 0;
}
}
<!-- jQuery -->
<script>
$(document).ready(function() {
$(".hamburger").click(function() {
$(".nav-links").toggleClass("active");
});
});
</script>
项目四:倒计时(Countdown Timer)
概述
倒计时用于展示剩余时间,本项目中我们将使用jQuery实现一个倒计时功能。
实现步骤
- HTML结构:创建一个倒计时的HTML结构,包括显示时间的容器。
- CSS样式:设置倒计时的样式,包括字体、颜色、布局等。
- jQuery脚本:使用jQuery来实现倒计时的逻辑。
<!-- HTML -->
<div id="countdown">
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</div>
<!-- CSS -->
#countdown {
text-align: center;
font-size: 24px;
}
#countdown div {
display: inline-block;
margin: 0 10px;
padding: 10px;
background-color: #f2f2f2;
border-radius: 5px;
}
/* jQuery */
<script>
var countDownDate = new Date("Dec 31, 2023 23:59:59").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerHTML = days + " 天 ";
document.getElementById("hours").innerHTML = hours + " 小时 ";
document.getElementById("minutes").innerHTML = minutes + " 分钟 ";
document.getElementById("seconds").innerHTML = seconds + " 秒 ";
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "活动已结束";
}
}, 1000);
</script>
项目五:无缝滚动(Infinite Scrolling)
概述
无缝滚动是一种让用户感觉页面内容无限多的技术。本项目中,我们将使用jQuery实现一个无缝滚动的新闻列表。
实现步骤
- HTML结构:创建一个新闻列表的HTML结构,包括新闻项容器。
- CSS样式:设置新闻列表的样式,包括布局、动画等。
- jQuery脚本:使用jQuery来实现新闻项的无缝滚动。
<!-- HTML -->
<div id="news-container">
<div class="news-item">
<h3>新闻标题1</h3>
<p>新闻内容1</p>
</div>
<div class="news-item">
<h3>新闻标题2</h3>
<p>新闻内容2</p>
</div>
<div class="news-item">
<h3>新闻标题3</h3>
<p>新闻内容3</p>
</div>
</div>
<!-- CSS -->
#news-container {
width: 100%;
overflow: hidden;
}
.news-item {
width: 300px;
background-color: #f2f2f2;
padding: 10px;
margin: 10px;
}
/* jQuery */
<script>
$(document).ready(function() {
var newsItems = [
{ title: "新闻标题1", content: "新闻内容1" },
{ title: "新闻标题2", content: "新闻内容2" },
{ title: "新闻标题3", content: "新闻内容3" },
// ...更多新闻项
];
var newsContainer = $("#news-container");
var newsItemTemplate = $("#news-item-template");
function appendNewsItem(newsItem) {
var item = newsItemTemplate.clone();
item.find("h3").text(newsItem.title);
item.find("p").text(newsItem.content);
newsContainer.append(item);
}
for (var i = 0; i < newsItems.length; i++) {
appendNewsItem(newsItems[i]);
}
newsContainer.scroll(function() {
if (newsContainer.scrollTop() + newsContainer.innerHeight() >= newsContainer[0].scrollHeight) {
// 添加更多新闻项
appendNewsItem(newsItems[Math.floor(Math.random() * newsItems.length)]);
}
});
});
</script>
项目六:全屏背景图切换(Full-Screen Background Image Switcher)
概述
全屏背景图切换用于在网页上展示多张背景图。本项目中,我们将使用jQuery实现一个全屏背景图切换功能。
实现步骤
- HTML结构:创建一个包含背景图的HTML结构。
- CSS样式:设置背景图的样式,包括全屏显示、切换效果等。
- jQuery脚本:使用jQuery来实现背景图的自动切换。
<!-- HTML -->
<div id="fullscreen-background">
<img src="background1.jpg" class="background-image" alt="背景图1">
<img src="background2.jpg" class="background-image" alt="背景图2">
<img src="background3.jpg" class="background-image" alt="背景图3">
</div>
<!-- CSS -->
#fullscreen-background {
position: relative;
width: 100%;
height: 100vh;
}
.background-image {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.background-image.active {
opacity: 1;
}
/* jQuery */
<script>
$(document).ready(function() {
var images = ["background1.jpg", "background2.jpg", "background3.jpg"];
var currentIndex = 0;
function changeBackgroundImage() {
$(".background-image").removeClass("active");
$("#" + images[currentIndex]).addClass("active");
currentIndex = (currentIndex + 1) % images.length;
}
setInterval(changeBackgroundImage, 3000);
});
</script>
项目七:折叠面板(Accordion)
概述
折叠面板用于展示大量信息,允许用户只展开需要查看的部分。本项目中,我们将使用jQuery实现一个折叠面板功能。
实现步骤
- HTML结构:创建一个折叠面板的HTML结构,包括标题和内容区域。
- CSS样式:设置折叠面板的样式,包括布局、动画等。
- jQuery脚本:使用jQuery来实现折叠面板的展开和收起功能。
<!-- HTML -->
<div class="accordion">
<div class="accordion-item">
<button class="accordion-button">标题1</button>
<div class="accordion-content">
<p>内容1</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-button">标题2</button>
<div class="accordion-content">
<p>内容2</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-button">标题3</button>
<div class="accordion-content">
<p>内容3</p>
</div>
</div>
</div>
<!-- CSS -->
.accordion {
width: 100%;
}
.accordion-item {
border: 1px solid #ccc;
margin-bottom: 10px;
}
.accordion-button {
background-color: #f2f2f2;
color: #333;
padding: 10px;
width: 100%;
cursor: pointer;
}
.accordion-content {
display: none;
padding: 10px;
}
/* jQuery */
<script>
$(document).ready(function() {
$(".accordion-button").click(function() {
var content = $(this).next(".accordion-content");
content.slideToggle();
});
});
</script>
项目八:搜索自动补全(Search Auto-Complete)
概述
搜索自动补全用于提供更便捷的搜索体验。本项目中,我们将使用jQuery实现一个搜索自动补全功能。
实现步骤
- HTML结构:创建一个搜索框和下拉列表。
- CSS样式:设置搜索框和下拉列表的样式。
- jQuery脚本:使用jQuery来实现搜索自动补全的动态效果。
<!-- HTML -->
<input type="text" id="search-box" placeholder="搜索...">
<ul id="search-results"></ul>
<!-- CSS -->
#search-box {
width: 300px;
padding: 10px;
margin-bottom: 10px;
}
#search-results {
list-style: none;
padding: 0;
margin: 0;
}
#search-results li {
background-color: #f2f2f2;
padding: 10px;
cursor: pointer;
}
#search-results li:hover {
background-color: #ddd;
}
/* jQuery */
<script>
$(document).ready(function() {
var searchResults = [
"苹果",
"华为",
"小米",
"OPPO",
"vivo",
// ...更多搜索结果
];
$("#search-box").on("keyup", function() {
var searchQuery = $(this).val().toLowerCase();
var filteredResults = searchResults.filter(function(result) {
return result.toLowerCase().indexOf(searchQuery) > -1;
});
$("#search-results").empty();
filteredResults.forEach(function(result) {
$("#search-results").append("<li>" + result + "</li>");
});
});
});
</script>
项目九:图片画廊(Image Gallery)
概述
图片画廊用于展示多张图片,并提供缩略图和放大查看功能。本项目中,我们将使用jQuery实现一个图片画廊。
实现步骤
- HTML结构:创建一个图片画廊的HTML结构,包括图片容器和缩略图区域。
- CSS样式:设置图片画廊的样式,包括布局、动画等。
- jQuery脚本:使用jQuery来实现图片的放大和缩小功能。
<!-- HTML -->
<div class="image-gallery">
<div class="image-container">
<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
</div>
<div class="thumbnail-container">
<img src="image1.jpg" alt="缩略图1" class="thumbnail">
<img src="image2.jpg" alt="缩略图2" class="thumbnail">
<img src="image3.jpg" alt="缩略图3" class="thumbnail">
</div>
</div>
<!-- CSS -->
.image-gallery {
position: relative;
display: flex;
justify-content: center;
}
.image-container {
position: relative;
width: 80%;
max-width: 600px;
overflow: hidden;
}
.thumbnail-container {
display: flex;
justify-content: space-around;
width: 20%;
}
.thumbnail {
width: 30px;
height: 30px;
cursor: pointer;
transition: transform 0.3s ease;
}
.thumbnail:hover {
transform: scale(1.1);
}
/* jQuery */
<script>
$(document).ready(function() {
var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentIndex = 0;
function showImage(index) {
$(".image-container img").hide();
$("#" + images[index]).show();
}
$(".thumbnail").click(function() {
currentIndex = $(this).index();
showImage(currentIndex);
});
showImage(currentIndex);
});
</script>
