js 网页特效|极客笔记

js 网页特效

在网页开发中，js（JavaScript）经常被用来实现各种炫酷的特效，让页面更加生动、吸引人。本文将介绍一些常见的js网页特效，帮助你在设计网页时增加一些亮点。

1. 鼠标悬停特效

鼠标悬停特效是网页中常见的一种交互效果，当用户将鼠标移动到特定元素上时，会触发相应的动画或样式变化。下面是一个简单的示例，当鼠标悬停在一个按钮上时，按钮的背景色会变化。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标悬停特效</title>
<style>
.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}
.button:hover {
    background-color: #2980b9;
}
</style>
</head>
<body>
<button class="button">悬停我</button>
</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>
<style>
.image {
    width: 200px;
    transition: transform 0.3s;
}
.image:hover {
    transform: scale(1.1);
}
</style>
</head>
<body>
<img class="image" src="image.jpg" alt="图片">
</body>
</html>

运行结果：当用户点击图片时，图片会放大1.1倍。

3. 页面滚动特效

页面滚动特效是指当用户滚动页面时，触发相应的动画或效果。下面是一个简单的示例，当用户滚动页面时，标题元素会逐渐变为红色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面滚动特效</title>
<style>
.title {
    color: black;
    transition: color 0.5s;
}
</style>
</head>
<body>
<h1 class="title">滚动页面查看效果</h1>
<script>
window.addEventListener("scroll", function() {
    var title = document.querySelector(".title");
    var scrollPosition = window.scrollY;
    if (scrollPosition > 100) {
        title.style.color = "red";
    } else {
        title.style.color = "black";
    }
});
</script>
</body>
</html>

运行结果：当用户向下滚动页面超过100像素时，标题会变为红色。

4. 轮播特效

轮播特效是常见的网页中展示多张图片或内容的方式。下面是一个简单的示例，实现一个自动轮播的图片效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播特效</title>
<style>
.slider {
    overflow: hidden;
    width: 300px;
    height: 200px;
}
.slides {
    display: flex;
}
.slide {
    width: 100%;
    transition: transform 0.5s;
}
</style>
</head>
<body>
<div class="slider">
    <div class="slides">
        <div class="slide">第一张图片</div>
        <div class="slide">第二张图片</div>
        <div class="slide">第三张图片</div>
    </div>
</div>
<script>
var slides = document.querySelectorAll(".slide");
var currentSlide = 0;

function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    updateSlidePosition();
}

function updateSlidePosition() {
    var offset = -currentSlide * slides[0].clientWidth;
    document.querySelector(".slides").style.transform = "translateX(" + offset + "px)";
}

setInterval(nextSlide, 2000);
</script>
</body>
</html>

运行结果：页面会每隔2秒自动切换图片，实现轮播效果。

以上是一些常见的js网页特效，通过这些特效可以为你的网页增添一些亮点，提升用户体验。当然，不要忘记合理使用这些特效，避免影响页面性能和用户体验。