在网页设计中，jQuery是一个非常强大的JavaScript库，它可以帮助我们轻松实现各种动态效果。以下将详细介绍20个实用的jQuery网站特效代码案例，帮助你提升网页设计的视觉效果和用户体验。
1. 滚动导航栏
案例描述：当用户滚动页面时，导航栏会自动固定在顶部。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>滚动导航栏</title>
<style>
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
z-index: 1000;
}
</style>
</head>
<body>
<div class="navbar">导航栏内容</div>
<div style="height: 2000px;">页面内容</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('.navbar').addClass('fixed');
} else {
$('.navbar').removeClass('fixed');
}
});
</script>
</body>
</html>
2. 翻转卡片效果
案例描述：鼠标悬停在卡片上时，卡片会翻转显示背面内容。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>翻转卡片效果</title>
<style>
.card {
width: 200px;
height: 200px;
position: relative;
perspective: 1000px;
}
.card-front, .card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
transition: transform 0.6s;
}
.card-front {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #333;
}
.card-back {
background-color: #f0f0f0;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="card">
<div class="card-front">正面</div>
<div class="card-back">背面</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('.card').hover(function() {
$(this).find('.card-back').css('transform', 'rotateY(0deg)');
}, function() {
$(this).find('.card-back').css('transform', 'rotateY(180deg)');
});
</script>
</body>
</html>
3. 动画轮播图
案例描述：使用jQuery实现自动轮播图效果。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动画轮播图</title>
<style>
.carousel {
width: 600px;
height: 300px;
overflow: hidden;
position: relative;
}
.carousel-item {
width: 100%;
height: 100%;
position: absolute;
display: none;
}
.carousel-item img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-item active"><img src="image1.jpg" alt="图片1"></div>
<div class="carousel-item"><img src="image2.jpg" alt="图片2"></div>
<div class="carousel-item"><img src="image3.jpg" alt="图片3"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var index = 0;
var items = $('.carousel-item');
var timer = setInterval(function() {
items.eq(index).fadeOut();
index = (index + 1) % items.length;
items.eq(index).fadeIn();
}, 3000);
</script>
</body>
</html>
4. 悬浮搜索框
案例描述：当用户将鼠标悬停在搜索框上时，搜索框会放大并显示搜索按钮。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>悬浮搜索框</title>
<style>
.search-box {
width: 200px;
height: 30px;
border: 1px solid #ccc;
padding: 5px 10px;
position: relative;
transition: width 0.3s;
}
.search-box:hover {
width: 300px;
}
.search-btn {
position: absolute;
right: 10px;
top: 5px;
width: 20px;
height: 20px;
background-image: url('search-icon.png');
background-size: cover;
}
</style>
</head>
<body>
<div class="search-box">
<input type="text" placeholder="搜索...">
<div class="search-btn"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('.search-box').hover(function() {
$(this).find('.search-btn').show();
}, function() {
$(this).find('.search-btn').hide();
});
</script>
</body>
</html>
5. 鼠标悬停显示提示信息
案例描述：当用户将鼠标悬停在元素上时，会显示一个提示信息。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>鼠标悬停显示提示信息</title>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="tooltip">鼠标悬停显示提示信息
<span class="tooltiptext">这是一个提示信息</span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 此处无需添加代码，已通过CSS实现效果
</script>
</body>
</html>
6. 动画回到顶部
案例描述：当用户滚动页面时，会出现一个“回到顶部”按钮，点击按钮后页面会自动滚动到顶部。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动画回到顶部</title>
<style>
.back-to-top {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
display: none;
}
.back-to-top:hover {
background-color: #666;
}
</style>
</head>
<body>
<div class="back-to-top">回到顶部</div>
<div style="height: 2000px;">页面内容</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});
$('.back-to-top').click(function() {
$('html, body').animate({scrollTop: 0}, 500);
});
</script>
</body>
</html>
7. 折叠面板效果
案例描述：点击面板标题，展开或收起面板内容。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>折叠面板效果</title>
<style>
.panel {
border: 1px solid #ccc;
margin-bottom: 10px;
}
.panel-title {
background-color: #f0f0f0;
padding: 10px;
cursor: pointer;
}
.panel-content {
display: none;
padding: 10px;
}
</style>
</head>
<body>
<div class="panel">
<div class="panel-title">面板1</div>
<div class="panel-content">面板1内容</div>
</div>
<div class="panel">
<div class="panel-title">面板2</div>
<div class="panel-content">面板2内容</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('.panel-title').click(function() {
$(this).next('.panel-content').slideToggle();
});
</script>
</body>
</html>
8. 瀑布流布局
案例描述：图片等元素按瀑布流方式排列，自动适应屏幕宽度。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<style>
.waterfall {
width: 100%;
position: relative;
}
.waterfall .item {
width: 200px;
margin: 10px;
background-color: #f0f0f0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.waterfall .item:nth-child(4n+1) {
clear: left;
}
</style>
</head>
<body>
<div class="waterfall">
<div class="item"><img src="image1.jpg" alt="图片1"></div>
<div class="item"><img src="image2.jpg" alt="图片2"></div>
<div class="item"><img src="image3.jpg" alt="图片3"></div>
<div class="item"><img src="image4.jpg" alt="图片4"></div>
<div class="item"><img src="image5.jpg" alt="图片5"></div>
<div class="item"><img src="image6.jpg" alt="图片6"></div>
<div class="item"><img src="image7.jpg" alt="图片7"></div>
<div class="item"><img src="image8.jpg" alt="图片8"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).on('load resize', function() {
var colWidth = $('.waterfall .item').outerWidth(true);
var colNum = Math.floor($('.waterfall').width() / colWidth);
$('.waterfall').css('column-count', colNum);
});
</script>
</body>
</html>
9. 时间轴效果
案例描述：使用jQuery实现时间轴效果，展示事件发生的顺序。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>时间轴效果</title>
<style>
.timeline {
position: relative;
width: 100%;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #ccc;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.left {
left: 0;
}
.right {
left: 50%;
}
.right::after {
content: " ";
height: 0;
position: absolute;
top: 15px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
.left::after {
content: " ";
height: 0;
position: absolute;
top: 15px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="timeline">
<div class="container left">
<div class="content">
<h2>事件1</h2>
<p>这是事件1的描述。</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>事件2</h2>
<p>这是事件2的描述。</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>事件3</h2>
<p>这是事件3的描述。</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>事件4</h2>
<p>这是事件4的描述。</p>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 此处无需添加代码，已通过CSS实现效果
</script>
</body>
</html>
10. 隐藏侧边栏
案例描述：点击侧边栏展开或收起。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>隐藏侧边栏</title>
<style>
.sidebar {
width: 200px;
height: 100vh;
background-color: #333;
color: #fff;
position: fixed;
left: -200px;
transition: left 0.3s;
}
.content {
margin-left: 200px;
padding: 20px;
}
.toggle-btn {
position: fixed;
top: 20px;
left: 20px;
width: 40px;
height: 40px;
background-image: url('menu-icon.png');
background-size: cover;
cursor: pointer;
}
</style>
</head>
<body>
<div class="toggle-btn"></div>
<div class="sidebar">侧边栏内容</div>
<div class="content">页面内容</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('.toggle-btn').click(function() {
$('.sidebar').css('left', '0');
});
$('.sidebar').hover(function() {
$(this).css('left', '0');
}, function() {
$(this).css('left', '-200px');
});
</script>
</body>
</html>
11. 动画加载进度条
案例描述：页面加载时显示一个动画进度条，加载完成后进度条消失。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动画加载进度条</title>
<style>
.progress-bar {
width: 0%;
height: 20px;
background-color: #333;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
</style>
</head>
<body>
<div class="progress-bar"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).load(function() {
var width = 0;
var timer = setInterval(function() {
width += 5;
$('.progress-bar').css('width', width + '%');
if (width >= 100) {
clearInterval(timer);
$('.progress-bar').fadeOut();
}
}, 50);
});
</script>
</body>
</html>