jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，在这篇文章中，我们将介绍一些常用的jQuery特效代码，包括淡入淡出、滑动效果、轮播图、下拉菜单等。
1、淡入淡出效果
淡入淡出效果是网页中常见的一种动画效果，可以通过jQuery实现，以下是一个简单的淡入淡出效果示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淡入淡出效果</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div class="box"></div>
<script>
$(document).ready(function() {
$("#show").click(function() {
$(".box").fadeIn();
});
$("#hide").click(function() {
$(".box").fadeOut();
});
});
</script>
</body>
</html>
2、滑动效果
滑动效果可以让页面元素在水平或垂直方向上移动，以下是一个简单的滑动效果示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑动效果</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 0;
}
</style>
</head>
<body>
<button id="left">向左滑动</button>
<button id="right">向右滑动</button>
<div class="box"></div>
<script>
$(document).ready(function() {
var leftPos = 0;
$("#left").click(function() {
leftPos -= 10;
$(".box").css("left", leftPos + "px");
});
$("#right").click(function() {
leftPos += 10;
$(".box").css("left", leftPos + "px");
});
});
</script>
</body>
</html>
3、轮播图
轮播图是一种常见的网页展示方式，可以用于展示图片、文字等内容，以下是一个简单的轮播图示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.slider {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.slider img {
width: 300px;
height: 200px;
display: none;
}
.slider img.active {
display: block;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" alt="图片1" class="active">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
</div>
<button id="prev">上一张</button>
<button id="next">下一张</button>
<script>
$(document).ready(function() {
var currentIndex = 0;
var images = $(".slider img");
var totalImages = images.length;
function showImage(index) {
images.removeClass("active");
$(images[index]).addClass("active");
}
$("#prev").click(function() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = totalImages - 1;
} else {
showImage(currentIndex);
}
});
$("#next").click(function() {
currentIndex++;
if (currentIndex >= totalImages) {
currentIndex = 0;
} else {
showImage(currentIndex);
}
});
showImage(currentIndex); // 初始化显示第一张图片
});
</script>
</body>
</html>
4、下拉菜单（级联菜单）