10个实用js特效代码 让你的网站动起来

10个实用JS特效代码 让你的网站动起来

大家好呀！作为一个整天和代码打交道的小编，今天想和大家分享一些超级实用的JavaScript特效代码。这些代码不仅能让你的网站瞬间"活"起来，还能提升用户体验，关键是——它们真的不难实现！

为什么网站需要动效？

说真的，在这个看脸的时代，一个静态的网站就像一张黑白照片，虽然能传达信息，但总少了那么点吸引力。适当的动效能让用户眼前一亮，还能引导他们关注重要内容。不过要注意，动效不是越多越好，恰到好处才是王道。

1. 平滑滚动效果

先来一个简单的，但效果立竿见影的平滑滚动。很多网站还在用那种"咔嚓"一下跳转的锚点链接，真的有点out了。

javascript

document.querySelectorAll('a[href^=""]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({

behavior: 'smooth'

这段代码会让带的链接点击时平滑滚动到对应位置，而不是突然跳转。用户体验直接提升一个档次！

2. 懒加载图片

网站加载慢？图片太多？懒加载来拯救你！这个特效能让图片只在进入视口时才加载，大大加快首屏速度。

javascript

const lazyImages = document.querySelectorAll('img.lazy');

const imageObserver = new IntersectionObserver((entries, observer) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

const img = entry.target;

img.src = img.dataset.src;

img.classList.remove('lazy');

observer.unobserve(img);

lazyImages.forEach(img => imageObserver.observe(img));

记得给需要懒加载的图片加上lazy类，并把真实URL放在data-src属性里哦！

3. 悬浮放大效果

电商网站爱用的效果之一，商品卡片悬浮时轻微放大，既不会太夸张，又能吸引用户点击。

javascript

const cards = document.querySelectorAll('.card');

cards.forEach(card => {

card.addEventListener('mouseenter', () => {

card.style.transform = 'scale(1.05)';

card.style.transition = 'transform 0.3s ease';

card.addEventListener('mouseleave', () => {

card.style.transform = 'scale(1)';

4. 动态表单验证

表单验证是每个网站必备的，但默认的HTML5验证太生硬了。加点JS让它更友好吧！

javascript

const form = document.querySelector('form');

const inputs = form.querySelectorAll('input, textarea');

inputs.forEach(input => {

input.addEventListener('blur', () => {

if (!input.checkValidity()) {

input.classList.add('invalid');

// 这里可以添加自定义错误提示

} else {

input.classList.remove('invalid');

配合一些CSS，可以让错误提示更加美观。

5. 暗黑模式切换

现在很多用户都喜欢暗黑模式，特别是晚上浏览网站时。实现起来其实很简单：

javascript

const darkModeToggle = document.getElementById('dark-mode-toggle');

const body = document.body;

darkModeToggle.addEventListener('click', () => {

body.classList.toggle('dark-mode');

// 保存用户偏好到localStorage

localStorage.setItem('darkMode', body.classList.contains('dark-mode'));

// 检查用户之前的偏好

if (localStorage.getItem('darkMode') === 'true') {

body.classList.add('dark-mode');

6. 打字机效果

想让你的欢迎语或标题更有趣？试试这个打字机效果：

javascript

function typeWriter(element, text, speed) {

let i = 0;

function typing() {

if (i

element.innerHTML += text.charAt(i);

i++;

setTimeout(typing, speed);

typing();

const welcomeText = document.getElementById('welcome-text');

typeWriter(welcomeText, '欢迎来到我的网站！', 100);

7. 进度条指示器

长页面必备！让用户知道阅读进度：

javascript

window.addEventListener('scroll', () => {

const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;

const progress = (scrollTop / scrollHeight) 100;

document.getElementById('progress-bar').style.width = progress + '%';

8. 悬浮提示框

当用户鼠标悬停在某个元素上时，显示更多信息：

javascript

const tooltipTriggers = document.querySelectorAll('[data-tooltip]');

tooltipTriggers.forEach(trigger => {

const tooltip = document.createElement('div');

tooltip.className = 'tooltip';

tooltip.textContent = trigger.dataset.tooltip;

document.body.appendChild(tooltip);

trigger.addEventListener('mouseenter', (e) => {

const rect = trigger.getBoundingClientRect();

tooltip.style.display = 'block';

tooltip.style.left = ${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px;

tooltip.style.top = ${rect.top - tooltip.offsetHeight - 10}px;

trigger.addEventListener('mouseleave', () => {

tooltip.style.display = 'none';

9. 无限滚动加载

对于内容很多的页面，无限滚动可以提升用户体验：

javascript

window.addEventListener('scroll', () => {

const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

if (scrollTop + clientHeight >= scrollHeight - 100) {

// 这里可以加载更多内容

loadMoreContent();

function loadMoreContent() {

// 模拟异步加载

setTimeout(() => {

const newContent = document.createElement('div');

newContent.innerHTML = '这是新加载的内容';

document.body.appendChild(newContent);

}, 500);

10. 动画计数器

展示统计数据时，让数字从0开始增长到目标值，效果很赞：

javascript

function animateCounter(element, target, duration) {

const start = 0;

const increment = target / (duration / 16); // 60fps

let current = start;

const counter = setInterval(() => {

current += increment;

element.textContent = Math.floor(current);

if (current >= target) {

element.textContent = target;

clearInterval(counter);

}, 16);

const counters = document.querySelectorAll('.counter');

counters.forEach(counter => {

const target = parseInt(counter.dataset.target);

animateCounter(counter, target, 2000);

特效对比表

为了帮你快速选择适合的特效，我整理了一个简单对比表：

使用特效的小贴士

1. 不要过度使用：特效是为了增强体验，不是炫技。太多动效会让用户分心。

2. 考虑性能：一些复杂的动画可能会影响页面性能，特别是在移动设备上。

3. 提供关闭选项：对于可能引起不适的特效（如闪烁效果），好提供关闭选项。

4. 测试兼容性：不是浏览器都支持新的JS特性，记得测试和提供回退方案。

5. 关注可访问性：确保特效不会影响屏幕阅读器等辅助工具的使用。

结语

以上就是我精心挑选的10个实用JS特效代码，每个都能为你的网站增添活力。记住，好的特效应该是"润物细无声"的，用户可能不会直接注意到它们，但一定会感受到更流畅、更愉悦的浏览体验。

你喜欢哪个特效？或者你有什么私藏的JS特效想分享给大家吗？我在评论区等你哦！