JavaScript网页特效实用合集（个人精选）

本文还有配套的精品资源，点击获取

简介：JavaScript是一种提高网页动态性和用户体验的脚本语言。本合集精选了10种常用网页特效的实现方法，包括滚动效果、悬停效果、滑动门与轮播图、下拉菜单与导航栏、动画效果、表单验证、时间日期处理、响应式设计、Ajax异步通信和拖放功能。每个特效类别都配有代码示例和实践应用，旨在帮助开发者通过学习和实践JavaScript来提升网页设计能力。

1. JavaScript网页动态性增强

1.1 JavaScript：网页的灵魂

在现代网页设计中，JavaScript 的使用无处不在，它赋予网页动态交互的能力。JavaScript 通过与用户的互动、动态更新内容以及响应各种事件，将静态的HTML页面转变为功能丰富的应用界面。了解JavaScript的基础原理和实际应用，对于提升网页动态性和用户体验至关重要。

// 示例：一个简单的JavaScript代码片段，展示动态更新网页内容
document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById('myText').textContent = 'Hello, JavaScript!';
});

1.2 动态内容的实现方式

动态内容的实现可以借助原生JavaScript，也可以利用成熟的库如jQuery来简化开发。使用JavaScript，开发者可以操作DOM，实时更新网页元素的属性、样式或内容。同时，借助事件监听机制，响应用户的操作，如点击、滚动、键盘输入等，从而实现交云动效果。

<!-- HTML结构 -->
<button id="myButton">点击我</button>
<p id="myText">这将被动态更新</p>

1.3 JavaScript与页面交互的最佳实践

为了确保网页的高效和流畅，JavaScript与页面交互的最佳实践包括：

• 最小化DOM操作 ：频繁的DOM操作会导致性能下降，应尽可能减少不必要的DOM重绘和回流。
• 事件委托 ：通过在父元素上使用单一事件监听器来管理多个子元素，提高性能和效率。
• 异步编程 ：利用 Promise 、 async/await 等现代JavaScript特性进行非阻塞的异步操作，以提高用户体验。

通过本章的学习，读者将掌握JavaScript基础，了解如何通过JavaScript实现网页的动态性增强，并应用到实际开发中去。

2. 滚动特效实现

滚动特效是一种增强用户体验的技术，通过在网页滚动时引入动画效果，可以极大地增强页面的动态感和吸引力。在现代网页设计中，滚动特效已经被广泛应用，从简单的背景移动到复杂的3D变换动画，都有可能成为留住用户的关键因素。

2.1 滚动动画的实现原理

要实现滚动动画，首先需要了解两个重要的技术点：CSS3的动画与关键帧，以及JavaScript对动画的控制。

2.1.1 CSS3的动画与关键帧

CSS3为开发者提供了动画（Animations）和关键帧（Keyframes）功能，允许设计师和开发者创建复杂且平滑的动画效果。关键帧是动画的一个重要概念，它定义了动画序列中的特定点，告诉浏览器在这些时间点上元素的样式应该是什么样子。

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slideIn 1s ease-in-out;
}

在上述代码中，我们定义了一个名为 slideIn 的关键帧动画，它描述了一个元素从左侧进入视窗的动画效果。 animation 属性将这个动画应用到 .element 类的元素上，并设置了动画的持续时间、速度曲线和重复次数。

2.1.2 JavaScript与动画控制

虽然CSS3能够处理大多数的动画效果，但在复杂的场景下，如动画序列的控制，或者需要在特定的滚动位置触发动画，往往需要借助JavaScript来实现更精细的控制。

document.addEventListener('DOMContentLoaded', function() {
  var element = document.querySelector('.element');
  var options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.5
  };

  var callback = function(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        element.classList.add('slideIn');
      } else {
        element.classList.remove('slideIn');
      }
    });
  };

  var observer = new IntersectionObserver(callback, options);
  observer.observe(element);
});

上面的JavaScript代码片段使用了Intersection Observer API来观察一个元素何时进入视口，并在元素与视口交叉时触发动画。此API允许开发者在元素进入或离开视口时执行回调函数，而无需编写复杂的循环检测逻辑。

2.2 滚动特效的常见效果与应用

2.2.1 全页面滚动效果

全页面滚动效果是一种常见的设计，它通过在页面滚动时改变背景图像或颜色，给用户带来沉浸式的体验。这种效果通常用于单页应用（SPA）和营销网站，可以有效地引导用户的注意力。

<div class="fullpage-scroll">
  <section class="page1">Page 1</section>
  <section class="page2">Page 2</section>
  <!-- Additional pages -->
</div>

在CSS中，可以使用伪元素 :before 或 :after 来添加全页面背景效果，并通过JavaScript监听滚动事件来改变背景：

.fullpage-scroll:before {
  content: '';
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('background.jpg') no-repeat center center;
  background-size: cover;
  transition: background-image 1s;
}

document.addEventListener('DOMContentLoaded', function() {
  window.addEventListener('scroll', function() {
    var page = Math.floor(window.scrollY / window.innerHeight);
    document.querySelector('.fullpage-scroll:before').style.backgroundImage = `url('background-${page + 1}.jpg')`;
  });
});

2.2.2 固定元素跟随滚动效果

有些滚动特效涉及到固定位置的元素随页面滚动而改变位置的动画效果，比如导航栏在滚动到一定位置时变为固定顶部。

.fixed-element {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

document.addEventListener('DOMContentLoaded', function() {
  window.addEventListener('scroll', function() {
    var scrollY = window.scrollY;
    var header = document.querySelector('.fixed-element');
    header.style.transform = scrollY > 100 ? 'translateY(-100px)' : 'translateY(0)';
  });
});

在上面的示例中，当页面向下滚动超过100像素时， .fixed-element 元素会向上滑动100像素，当滚动回顶部时则恢复原位。

2.3 滚动特效的性能优化

2.3.1 优化方法与技巧

滚动特效虽然可以提高用户界面的吸引力，但是如果处理不当，也可能对页面的性能造成负面影响。以下是一些性能优化的方法与技巧：

• 减少重绘与回流（Reflow） ：重绘和回流是浏览器计算元素布局和渲染的两个主要操作。在滚动特效中，尽量避免频繁触发这些操作。例如，使用CSS3的变换（transform）和透明度（opacity）来实现动画，而不是直接操作元素的位置或高度。
• 使用GPU加速 ：通过将动画的属性设置为3D变换（如 translateZ(0) ），可以利用GPU进行加速，从而获得更流畅的动画效果。
• 懒加载 ：对于大型背景图像和视频，使用懒加载技术，只在需要显示时才加载资源，可以有效减少初次加载的资源数量和大小，提升性能。

2.3.2 实例分析

下面通过一个具体实例，来分析如何优化滚动特效的性能。

<div class="lazy-image">
  <img data-src="large-image.jpg" alt="Large Image">
</div>

.lazy-image img {
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

.lazy-image img.loaded {
  opacity: 1;
}

document.addEventListener('DOMContentLoaded', function() {
  var images = document.querySelectorAll('.lazy-image img');
  images.forEach(function(img) {
    img.addEventListener('load', function() {
      img.classList.add('loaded');
    });
  });
});

在这个实例中，我们通过JavaScript在图片加载完成时添加一个 loaded 类，该类控制图片的透明度从0变为1。图片加载前，它不占用视口空间，因此不会导致页面布局的重排。这种方法既实现了懒加载，也优化了性能。

通过以上的章节内容，我们深入了解了滚动特效的实现原理、常见效果与应用、以及性能优化的方法。在接下来的章节中，我们将探讨悬停效果开发，包括其不同的实现方式、高级效果的开发，以及兼容性与优化策略。

3. 悬停效果开发

悬停效果是增强用户界面互动性的重要手段，它通过视觉反馈向用户表明元素是可以交互的。本章节将探讨如何利用现代Web技术实现各种悬停效果，并着重分析如何在不同浏览器中保持其一致性和兼容性。

3.1 悬停效果的实现方法

悬停效果的实现可以采用多种技术，最常见的是原生JavaScript和jQuery库。它们各有优劣，但都旨在提供丰富的用户体验。

3.1.1 原生JavaScript实现

原生JavaScript是浏览器原生支持的脚本语言，无需额外加载外部库即可实现悬停效果。它更轻量，执行效率通常高于使用外部库。

// 简单的图片悬停变色效果
document.addEventListener("DOMContentLoaded", (event) => {
  const images = document.querySelectorAll('img');
  images.forEach((img) => {
    img.addEventListener('mouseover', function() {
      this.style.backgroundColor = 'lightgray'; // 鼠标悬停时改变背景色
    });
    img.addEventListener('mouseout', function() {
      this.style.backgroundColor = ''; // 鼠标移出时恢复原始背景色
    });
  });
});

代码逻辑解读： - 上述代码段在文档加载完成后执行，选取页面上所有的 <img> 元素。 - 对每一个 <img> 元素添加 mouseover 和 mouseout 事件监听器。 - 在 mouseover 事件中，通过改变 backgroundColor 属性，实现鼠标悬停时图片背景变色效果。 - 在 mouseout 事件中，将 backgroundColor 属性清空，恢复图片原始外观。

原生JavaScript实现悬停效果更轻便，无需额外依赖，加载速度快，更适合对性能有较高要求的应用场景。

3.1.2 jQuery的插件与封装

jQuery是一个快速、小巧、功能丰富的JavaScript库。使用jQuery可以快速实现复杂的交互效果，包括悬停效果。通过插件，开发者能够轻松扩展jQuery的功能。

$(document).ready(function() {
  $("img").hover(
    function() {
      // 鼠标进入时的回调函数
      $(this).addClass("hover-state");
    }, 
    function() {
      // 鼠标离开时的回调函数
      $(this).removeClass("hover-state");
    }
  );
});

代码逻辑解读： - 在文档就绪后，选取页面上所有的 <img> 元素。 - 使用jQuery的 hover() 方法，传入两个回调函数，分别对应 mouseover 和 mouseout 事件。 - 在鼠标悬停时，给图片添加一个 hover-state 类，这个类中可以定义悬停时的样式改变，如变色、变透明度等。 - 当鼠标离开图片时，移除 hover-state 类，恢复到原始状态。

使用jQuery插件能够快速实现悬停效果，且代码更加简洁。但需要注意的是，依赖jQuery库意味着引入额外的加载时间和潜在的性能开销。

3.2 高级悬停效果的开发

在现代Web开发中，高级悬停效果如图片放大镜效果和3D翻转卡片效果可以极大提升用户体验。

3.2.1 图片放大镜效果

图片放大镜效果允许用户将鼠标悬停在一个小图片上，预览到大图的局部区域。

// 简单的图片放大镜效果
const smallImg = document.querySelector('.small-image');
const largeImg = document.querySelector('.large-image');

smallImg.addEventListener('mousemove', (e) => {
  const x = e.offsetX;
  const y = e.offsetY;

  // 设置大图预览框的位置
  largeImg.style.backgroundPosition = `-${x / 10}px -${y / 10}px`;
});

代码逻辑解读： - 此代码段选取页面上的两个图片元素，分别代表小图和大图。 - 为小图添加 mousemove 事件监听器。 - 当鼠标在小图上移动时，计算鼠标的 offsetX 和 offsetY 。 - 根据鼠标的坐标，调整大图 background-position 属性，实现局部放大效果。

图片放大镜效果的实现依赖于精确的鼠标位置计算和CSS背景定位，给用户提供了直观的交互体验。

3.2.2 3D翻转卡片效果

3D翻转卡片效果可以让用户通过翻转动作查看元素的不同面，适用于产品展示或内容布局。

// 使用CSS3实现3D翻转效果
const cards = document.querySelectorAll('.card');

cards.forEach((card) => {
  card.addEventListener('click', () => {
    card.style.transform = card.style.transform === 'rotateY(180deg)' ? 'rotateY(0deg)' : 'rotateY(180deg)';
  });
});

代码逻辑解读： - 选取页面上的所有 .card 元素。 - 为每个卡片添加点击事件监听器。 - 当卡片被点击时，根据当前的 transform 属性值切换，实现翻转效果。

通过CSS3的 transform 属性和适当的JavaScript控制，可以轻松实现3D翻转效果。但为了实现更平滑的动画和更好的跨浏览器支持，通常会使用外部库如Three.js或者在Sass/Less中预处理。

3.3 悬停效果的兼容性与优化

为了确保悬停效果能够在不同的浏览器和设备上正常工作，兼容性测试和性能优化是必不可少的。

3.3.1 跨浏览器测试与修复

跨浏览器测试涉及到不同浏览器和版本的兼容性检查，需要使用如BrowserStack、Selenium等工具进行自动化测试。

3.3.2 优化加载时间和交互响应

优化悬停效果的加载时间可以通过懒加载技术实现，仅在用户即将看到元素时才加载相关的资源。同时，通过异步加载JavaScript代码或使用Web Workers减少UI线程阻塞，可以提高交互响应速度。

在实现悬停效果时，还应考虑到用户体验。例如，悬停时的动画应避免过于突兀，以防止用户感到不适。渐变、淡入淡出等效果可以平滑过渡，提升用户体验。

总结： 悬停效果是现代Web界面不可或缺的一部分。通过原生JavaScript和jQuery库，开发者能够轻松实现各种悬停效果。随着技术的发展，高级悬停效果如图片放大镜和3D翻转卡片效果也越来越受欢迎。为保证效果的通用性和性能，兼容性测试和优化是实现悬停效果时必须要考虑的问题。随着Web标准的不断演进，未来的悬停效果将会更加丰富和高效。

4. 滑动门与轮播图技术

4.1 滑动门技术的原理与实现

4.1.1 滑动门的基本原理

滑动门技术是一种常见的CSS布局方式，主要用于创建灵活的容器，能够根据内容的宽度自动调整其大小。这种技术的核心在于使用两个相同背景图像的元素，并通过CSS的伪类 :hover 、 :focus 、 :active 来控制元素的显示和隐藏，从而达到滑动的效果。例如，常见的导航栏就是使用滑动门技术来实现的。通过调整容器的宽度，我们可以轻松地控制元素的展示状态，这使得响应式设计变得更为简洁和有效。

4.1.2 滑动门的实际代码实现

以下是一个简单的滑动门技术实现示例：

.navbar {
    background: url(left-edge.png) left top no-repeat;
    padding-left: 10px;
}

.navbar a {
    float: left;
    background: url(right-edge.png) right top no-repeat;
    padding-right: 10px;
    text-decoration: none;
    color: #000;
}

.navbar a:hover,
.navbar a:focus {
    background-position: right top;
    padding-left: 10px;
    padding-right: 0;
    background-image: url(left-edge.png);
    background-repeat: no-repeat;
}

.navbar a:hover + a,
.navbar a:focus + a {
    background-position: left top;
    padding-left: 10px;
    padding-right: 0;
    background-image: url(right-edge.png);
    background-repeat: no-repeat;
}

在上述CSS代码中，我们定义了 .navbar 类来创建导航栏容器，并为导航项设置了左侧和右侧的边框图像。当鼠标悬停或聚焦在一个导航项上时， background-position 属性改变以切换左右边框图像的位置，从而实现滑动门效果。通过这种方法，即使在不同的设备和屏幕尺寸下，导航栏的视觉效果也能保持一致。

4.2 轮播图技术的原理与实现

4.2.1 轮播图的工作机制

轮播图技术是一种在有限的空间内展示一系列图片或内容的交互方式，常用于网站的主焦点区域或者图片展示。它的工作机制涉及到了定时器的使用，通过周期性地更换显示内容来达到动画效果。轮播图通常包含控制按钮，允许用户手动切换内容。为了提升用户体验，还需要考虑触摸滑动、键盘导航、自适应布局等多方面的因素。

4.2.2 轮播图的代码实现及优化

实现轮播图的代码相对复杂，这里提供一个基本的HTML和JavaScript实现示例：

<div id="carousel" class="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active"><img src="image1.jpg" alt="image1"></div>
        <div class="carousel-item"><img src="image2.jpg" alt="image2"></div>
        <div class="carousel-item"><img src="image3.jpg" alt="image3"></div>
    </div>
    <a class="carousel-control prev" href="#">&#10094;</a>
    <a class="carousel-control next" href="#">&#10095;</a>
</div>

.carousel {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
}

.carousel-inner {
    overflow: hidden;
}

.carousel-item {
    display: none;
}

.active {
    display: block;
}

let items = document.querySelectorAll('.carousel-item');
let currentIndex = 0;

function showNext() {
    items[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % items.length;
    items[currentIndex].classList.add('active');
}

let carousel = document.querySelector('.carousel');
carousel.querySelector('.next').addEventListener('click', showNext);

在上述的JavaScript代码中，我们通过监听点击事件来切换 .active 类的图片，从而实现轮播。为了使轮播图更加完善，我们可以进一步添加自动轮播、触摸滑动支持、键盘事件监听以及响应式设计等优化措施。这样，无论用户是在桌面上还是移动设备上，都可以得到良好的使用体验。

4.3 交互式轮播图的高级实现

4.3.1 响应式设计在轮播图中的应用

响应式设计是让网站能够适应不同屏幕尺寸的关键技术。在轮播图中实现响应式设计，需要考虑到不同设备的布局和尺寸。为了实现这一点，我们可以使用媒体查询来调整轮播图的样式。当屏幕尺寸变化时，轮播图的图片数量、大小或布局可以自动适应，以保证良好的视觉效果和用户体验。

@media (max-width: 768px) {
    .carousel-item {
        width: 100%;
    }
}

@media (min-width: 769px) {
    .carousel-item {
        width: 50%;
    }
}

在上面的CSS代码中，我们定义了两个媒体查询，针对小于768像素和大于等于769像素的屏幕宽度设置 .carousel-item 的宽度。这样，当设备的屏幕尺寸改变时，轮播图的布局会自动适应这些变化。

4.3.2 滚动条与导航点的交互实现

为了进一步提高用户体验，轮播图可以实现滚动条或导航点的交互。用户可以点击导航点或者拖动滚动条来快速定位到特定的轮播项。这需要在轮播图的结构中增加一个导航点容器，并通过JavaScript来控制当前激活的导航点和轮播图的切换。

<div id="carousel" class="carousel">
    <div class="carousel-inner">
        <!--轮播项内容-->
    </div>
    <div class="carousel-nav">
        <div class="carousel-nav-item active" data-target="#carousel"></div>
        <div class="carousel-nav-item" data-target="#carousel"></div>
        <div class="carousel-nav-item" data-target="#carousel"></div>
        <!--更多的导航点-->
    </div>
</div>

document.querySelectorAll('.carousel-nav-item').forEach(item => {
    item.addEventListener('click', function() {
        let target = document.querySelector(this.getAttribute('data-target'));
        let index = Array.from(target.querySelectorAll('.carousel-item')).indexOf(target.querySelector('.carousel-item.active'));
        target.querySelector('.carousel-item:nth-child(' + (parseInt(this.getAttribute('data-index')) + 1) + ')').classList.add('active');
        currentIndex = parseInt(this.getAttribute('data-index'));
    });
});

上述JavaScript代码中，我们为每个导航点绑定了点击事件，通过 data-target 和 data-index 属性来获取目标轮播图容器和索引，然后切换到相应的轮播项。这样，用户可以直观地通过导航点来选择想要查看的内容。

5. 下拉菜单与导航栏响应式设计

下拉菜单和导航栏是现代网页设计中不可或缺的组件，它们不仅需要为用户提供清晰的信息架构，还要在不同设备上保证良好的可用性和美观。响应式设计在这里扮演了重要角色，确保了用户无论通过何种设备访问网站，都能获得一致的用户体验。

5.1 下拉菜单的设计原理与实践

5.1.1 纯CSS实现的下拉菜单

纯CSS实现的下拉菜单不需要任何JavaScript，仅利用CSS的伪类和定位即可完成。这样的菜单在响应式设计中尤其重要，因为它通常不需要额外的脚本处理就可以适应不同屏幕尺寸。

/* 纯CSS下拉菜单 */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

5.1.2 JavaScript增强的交互效果

虽然纯CSS的下拉菜单简单且易于实现，但它缺乏更复杂的交互性。使用JavaScript可以增强下拉菜单的功能，例如添加延迟显示，动态操作DOM，或者监听不同事件触发下拉。

// 增强的下拉菜单交互效果
var dropdowns = document.querySelectorAll('.dropdown');

dropdowns.forEach(function(dropdown) {
  dropdown.addEventListener('mouseenter', function() {
    var dropdownContent = this.querySelector('.dropdown-content');
    dropdownContent.style.display = 'block';
  });

  dropdown.addEventListener('mouseleave', function() {
    var dropdownContent = this.querySelector('.dropdown-content');
    dropdownContent.style.display = 'none';
  });
});

5.2 导航栏的响应式设计技术

5.2.1 媒体查询在导航栏中的应用

媒体查询是CSS3中引入的一个功能强大的特性，它允许我们根据不同的屏幕尺寸和分辨率来应用不同的CSS样式。这对于实现响应式导航栏至关重要。

/* 响应式导航栏 */
.navbar {
  width: 100%;
  background-color: #333;
  overflow: hidden;
}

/* 媒体查询，适用于中等屏幕 */
@media screen and (min-width: 600px) {
  .navbar a {
    float: left;
  }
}

/* 媒体查询，适用于小屏幕 */
@media screen and (max-width: 600px) {
  .navbar a {
    float: none;
    display: block;
  }
}

5.2.2 JavaScript与响应式导航栏的交互

使用JavaScript，我们可以创建一个导航栏切换按钮，当屏幕尺寸较小时，导航栏被折叠起来，用户可以通过点击按钮来展开或收起导航栏。

// 响应式导航栏的JavaScript交互
var toggleButton = document.getElementById('nav-toggle');
var navbarMenu = document.getElementById('navbar-menu');

toggleButton.addEventListener('click', function() {
  navbarMenu.style.display = navbarMenu.style.display === 'block' ? 'none' : 'block';
});

5.3 下拉菜单与导航栏的优化与适配

5.3.1 面向未来的兼容性解决方案

随着技术的发展，我们需要考虑新的CSS特性、JavaScript API，甚至是Web Components等技术来确保导航栏和下拉菜单能够适应未来的标准。例如，使用CSS Grid或Flexbox来设计布局，利用Intersection Observer来优化下拉菜单的交互。

5.3.2 提升用户体验的细节处理

在实现响应式导航栏和下拉菜单时，我们应确保所有元素在视觉和功能上都保持一致，并且提供清晰的指示和反馈，让用户知道他们的操作将产生何种效果。例如，当前活动菜单项的高亮显示，以及鼠标悬停时的平滑动画效果。

在设计细节时，测试各种设备和浏览器兼容性是至关重要的。使用工具如BrowserStack和Chrome的开发者工具进行设备模拟测试，确保在不同环境下的一致性和性能。

通过以上章节，我们深入了解了下拉菜单和导航栏在现代响应式网页设计中的重要性，以及如何利用CSS和JavaScript技术实现它们，并进行优化和适配。通过持续关注和应用新的技术和解决方案，我们能够为用户提供更加流畅和一致的浏览体验。

本文还有配套的精品资源，点击获取

简介：JavaScript是一种提高网页动态性和用户体验的脚本语言。本合集精选了10种常用网页特效的实现方法，包括滚动效果、悬停效果、滑动门与轮播图、下拉菜单与导航栏、动画效果、表单验证、时间日期处理、响应式设计、Ajax异步通信和拖放功能。每个特效类别都配有代码示例和实践应用，旨在帮助开发者通过学习和实践JavaScript来提升网页设计能力。

本文还有配套的精品资源，点击获取