JS特效|极客笔记

JS特效

JavaScript（简称JS）是一种轻量级，可嵌入的编程语言，用于在网页上实现交互效果。在现代网页开发中，JavaScript已经成为不可或缺的一部分，通过JavaScript可以实现各种特效，让网页更加生动和吸引人。本文将介绍一些常见的JavaScript特效，并给出示例代码和运行结果。

滚动特效

滚动特效是在页面滚动时触发的效果，可以带来视觉上的耳目一新。比如当用户滚动页面时，页面中的元素会以某种动画效果逐渐出现或消失。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scroll Animation</title>
<style>
    .hidden {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.5s, transform 0.5s;
    }
    .visible {
        opacity: 1;
        transform: translateY(0);
    }
</style>
</head>
<body>
<div class="hidden" id="scrollAnimation">
    Scroll down to see the animation
</div>
<script>
    window.addEventListener("scroll", function() {
        var element = document.getElementById("scrollAnimation");
        var position = element.getBoundingClientRect();
        if (position.top < window.innerHeight) {
            element.classList.add("visible");
            element.classList.remove("hidden");
        }
    });
</script>
</body>
</html>

运行结果

当用户滚动页面时，页面中的元素会逐渐显示出来，并且带有动画效果。

点击特效

点击特效是在用户点击页面元素时触发的效果，可以增强用户的操作体验。比如当用户点击一个按钮时，按钮会发生颜色变化或者产生动画效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Animation</title>
<style>
    button {
        padding: 10px 20px;
        background-color: blue;
        color: white;
        border: none;
        cursor: pointer;
        transition: background-color 0.5s;
    }
    button:hover {
        background-color: red;
    }
</style>
</head>
<body>
<button id="clickAnimation">Click Me!</button>
<script>
    var button = document.getElementById("clickAnimation");
    button.addEventListener("click", function() {
        button.style.backgroundColor = "green";
    });
</script>
</body>
</html>

运行结果

当用户点击按钮时，按钮的颜色会从蓝色变为绿色，并带有动画效果。

鼠标悬停特效

鼠标悬停特效是在用户将鼠标移动到页面元素上方时触发的效果，可以让页面元素更具交互性。比如当用户将鼠标悬停在一个图片上时，图片会放大或者改变颜色。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Animation</title>
<style>
    img {
        transition: transform 0.5s;
    }
    img:hover {
        transform: scale(1.2);
    }
</style>
</head>
<body>
<img src="image.jpg" alt="Image" width="200">
</body>
</html>

运行结果

当用户将鼠标悬停在图片上时，图片会放大1.2倍，并带有动画效果。

定时特效

定时特效是在一定时间间隔内自动触发的效果，可以用来展示轮播图或者定时刷新页面内容。比如每隔一段时间，页面中的文字内容会自动切换。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Timer Animation</title>
<style>
    .content {
        opacity: 0;
        transition: opacity 0.5s;
    }
</style>
</head>
<body>
<div id="timerAnimation">
    <div class="content">Content 1</div>
    <div class="content" style="display: none;">Content 2</div>
    <div class="content" style="display: none;">Content 3</div>
</div>
<script>
    var contents = document.querySelectorAll(".content");
    var index = 0;
    setInterval(function() {
        contents[index].style.display = "none";
        contents[index].style.opacity = 0;
        index = (index + 1) % contents.length;
        contents[index].style.display = "block";
        setTimeout(function() {
            contents[index].style.opacity = 1;
        }, 100);
    }, 2000);
</script>
</body>
</html>