web关于jQuery实现动画或者网页特效的案例

以下是几个基于jQuery实现动画或者网页特效的案例：

1. 图片轮播效果

HTML结构：

<div class="slider">
  <div class="slider-wrapper">
    <img src="image1.jpg" alt="Image 1" />
    <img src="image2.jpg" alt="Image 2" />
    <img src="image3.jpg" alt="Image 3" />
  </div>
</div>

CSS样式：

.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slider-wrapper {
  position: absolute;
  width: 300%;
  height: 100%;
  left: 0;
  top: 0;
}

.slider-wrapper img {
  width: 33.333%;
  height: 100%;
  float: left;
  display: block;
}

JavaScript代码：

$(function() {
  var sliderWrapper = $('.slider-wrapper');
  var sliderImageWidth = $('.slider-wrapper img').width();
  var sliderImageCount = $('.slider-wrapper img').length;
  var currentImage = 1;
  
  sliderWrapper.css('width', sliderImageCount * sliderImageWidth);
  
  function slide() {
    sliderWrapper.animate({left: -sliderImageWidth * currentImage}, function() {
      currentImage++;
      if(currentImage === sliderImageCount) {
        currentImage = 1;
        sliderWrapper.css('left', 0);
      }
    });
  }
  
  setInterval(slide, 3000);
});

2. 折叠面板效果

HTML结构：

<div class="accordion">
  <div class="accordion-section">
    <h3 class="accordion-header">Section 1</h3>
    <div class="accordion-content">
      <p>Content for section 1</p>
    </div>
  </div>
  <div class="accordion-section">
    <h3 class="accordion-header">Section 2</h3>
    <div class="accordion-content">
      <p>Content for section 2</p>
    </div>
  </div>
  <div class="accordion-section">
    <h3 class="accordion-header">Section 3</h3>
    <div class="accordion-content">
      <p>Content for section 3</p>
    </div>
  </div>
</div>

CSS样式：

.accordion-section {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion-header {
  padding: 10px;
  margin: 0;
  background-color: #f0f0f0;
  cursor: pointer;
}

.accordion-content {
  display: none;
  padding: 10px;
}

JavaScript代码：

$(function() {
  var accordionHeaders = $('.accordion-header');
  
  accordionHeaders.click(function() {
    var accordionContent = $(this).next('.accordion-content');
    
    if(accordionContent.is(':visible')) {
      accordionContent.slideUp();
    } else {
      accordionContent.slideDown();
    }
  });
});

3. 滚动监听效果

HTML结构：

<nav class="menu">
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>
<section id="section1">
  <h2>Section 1</h2>
  <p>Content for section 1</p>
</section>
<section id="section2">
  <h2>Section 2</h2>
  <p>Content for section 2</p>
</section>
<section id="section3">
  <h2>Section 3</h2>
  <p>Content for section 3</p>
</section>

CSS样式：

.menu {
  position: fixed;
  top: 0;
  left: 0;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
  margin-right: 10px;
}

section {
  height: 500px;
  margin-top: 60px;
  border: 1px solid #ccc;
  padding: 20px;
}

JavaScript代码：

$(function() {
  var menu = $('.menu');
  var menuLinks = $('.menu a');
  var sections = $('section');
  
  $(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    
    sections.each(function() {
      var sectionTop = $(this).offset().top - 100;
      var sectionBottom = sectionTop + $(this).height();
      
      if(currentScroll >= sectionTop && currentScroll <= sectionBottom) {
        var sectionId = $(this).attr('id');
        var menuLink = menu.find('a[href="#' + sectionId + '"]');
        
        menuLinks.removeClass('active');
        menuLink.addClass('active');
      }
    });
  });
});