正文

从零开始：用jQuery轻松实现10个实战项目教程汇总

/0 浏览量
0704

项目一：制作简单的轮播图

轮播图是一种常见的网页元素，可以用来展示图片、文章摘要等。下面我将为您介绍如何使用jQuery制作一个简单的轮播图。

1. 准备工作

首先，您需要在HTML中添加以下结构：

<div id="carousel" class="carousel">
  <div class="carousel-item active">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="carousel-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="carousel-item">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

然后，在CSS中添加以下样式：

.carousel {
  width: 100%;
  position: relative;
}

.carousel-item {
  display: none;
  width: 100%;
}

.carousel-item.active {
  display: block;
}

最后，在JavaScript中添加以下代码：

$(document).ready(function() {
  var currentIndex = 0;
  var items = $('.carousel-item');

  function showNextItem() {
    items.eq(currentIndex).removeClass('active').fadeOut();
    currentIndex = (currentIndex + 1) % items.length;
    items.eq(currentIndex).addClass('active').fadeIn();
  }

  setInterval(showNextItem, 3000);
});

2. 实战效果

通过以上代码，您将得到一个简单的轮播图。您可以尝试添加按钮控制、自动播放等功能，以增强用户体验。

项目二：实现响应式导航菜单

响应式导航菜单是一种能够根据屏幕大小自动调整的导航菜单。下面我将为您介绍如何使用jQuery实现一个响应式导航菜单。

1. 准备工作

在HTML中添加以下结构：

<nav id="navbar" class="navbar">
  <ul class="navbar-nav">
    <li class="navbar-item"><a href="#">首页</a></li>
    <li class="navbar-item"><a href="#">关于</a></li>
    <li class="navbar-item"><a href="#">服务</a></li>
    <li class="navbar-item"><a href="#">联系</a></li>
  </ul>
</nav>

在CSS中添加以下样式：

.navbar {
  background-color: #333;
  overflow: hidden;
}

.navbar-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar-item {
  float: left;
}

.navbar-item a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

@media screen and (max-width: 600px) {
  .navbar-item {
    float: none;
    display: block;
  }
}

在JavaScript中添加以下代码：

$(document).ready(function() {
  $('#navbar').on('click', '.navbar-item', function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

2. 实战效果

通过以上代码，您将得到一个响应式导航菜单。当屏幕宽度小于600px时，菜单项将堆叠显示。

项目三：制作倒计时

倒计时是一种常见的网页元素，用于展示活动倒计时、限时优惠等。下面我将为您介绍如何使用jQuery制作一个倒计时。

1. 准备工作

在HTML中添加以下结构：

<div id="countdown" class="countdown">
  <div class="countdown-item days">
    <span id="days"></span>天
  </div>
  <div class="countdown-item hours">
    <span id="hours"></span>小时
  </div>
  <div class="countdown-item minutes">
    <span id="minutes"></span>分钟
  </div>
  <div class="countdown-item seconds">
    <span id="seconds"></span>秒
  </div>
</div>

在CSS中添加以下样式：

.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}

.countdown-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  margin: 0 5px;
}

.countdown-item span {
  font-size: 24px;
  font-weight: bold;
}

在JavaScript中添加以下代码：

$(document).ready(function() {
  var targetDate = new Date('2023-12-31').getTime();
  var countdownInterval = setInterval(function() {
    var now = new Date().getTime();
    var timeDiff = targetDate - now;

    var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
    var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

    $('#days').text(days);
    $('#hours').text(hours);
    $('#minutes').text(minutes);
    $('#seconds').text(seconds);

    if (timeDiff < 0) {
      clearInterval(countdownInterval);
      $('#countdown').html('活动已结束！');
    }
  }, 1000);
});

2. 实战效果

通过以上代码，您将得到一个倒计时。倒计时将在指定日期结束。

项目四：实现全屏滚动效果

全屏滚动效果是一种流行的网页设计元素，可以让用户在网页中流畅地滚动浏览。下面我将为您介绍如何使用jQuery实现全屏滚动效果。

1. 准备工作

在HTML中添加以下结构：

<div id="fullscreen-scroll" class="fullscreen-scroll">
  <div class="scroll-item">
    <h2>第一屏</h2>
    <p>这里是第一屏的内容。</p>
  </div>
  <div class="scroll-item">
    <h2>第二屏</h2>
    <p>这里是第二屏的内容。</p>
  </div>
  <div class="scroll-item">
    <h2>第三屏</h2>
    <p>这里是第三屏的内容。</p>
  </div>
</div>

在CSS中添加以下样式：

.fullscreen-scroll {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.scroll-item {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}

.scroll-item h2 {
  font-size: 32px;
  font-weight: bold;
}

.scroll-item p {
  font-size: 18px;
}

在JavaScript中添加以下代码：

$(document).ready(function() {
  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    var scrollBottom = scrollTop + $(window).height();

    $('.scroll-item').each(function() {
      var itemTop = $(this).offset().top;
      var itemBottom = itemTop + $(this).height();

      if (scrollBottom >= itemTop && scrollTop <= itemBottom) {
        $(this).addClass('active').siblings().removeClass('active');
      }
    });
  });
});

2. 实战效果

通过以上代码，您将得到一个全屏滚动效果。当用户滚动到某个屏幕时，该屏幕将变为高亮显示。

项目五：实现图片懒加载

图片懒加载是一种优化网页加载速度的技术。下面我将为您介绍如何使用jQuery实现图片懒加载。

1. 准备工作

在HTML中添加以下结构：

<div id="lazy-load" class="lazy-load">
  <img src="placeholder.jpg" data-src="image1.jpg" alt="Image 1">
  <img src="placeholder.jpg" data-src="image2.jpg" alt="Image 2">
  <img src="placeholder.jpg" data-src="image3.jpg" alt="Image 3">
</div>

在CSS中添加以下样式：

.lazy-load img {
  width: 100%;
  height: auto;
}

在JavaScript中添加以下代码：

$(document).ready(function() {
  var images = $('img[data-src]');

  function lazyLoad() {
    var windowHeight = $(window).height();
    var scrollTop = $(window).scrollTop();

    images.each(function() {
      var imageTop = $(this).offset().top;
      var imageBottom = imageTop + $(this).height();

      if (scrollTop <= imageBottom && scrollTop >= imageTop) {
        $(this).attr('src', $(this).attr('data-src')).removeAttr('data-src');
      }
    });
  }

  $(window).scroll(lazyLoad);
  $(window).resize(lazyLoad);
  $(window).trigger('scroll');
});

2. 实战效果

通过以上代码，您将实现图片懒加载功能。当用户滚动到图片位置时，图片将自动加载。

项目六：实现瀑布流布局

瀑布流布局是一种流行的网页布局方式，可以自动加载图片并保持整齐的排列。下面我将为您介绍如何使用jQuery实现瀑布流布局。

1. 准备工作

在HTML中添加以下结构：

<div id="waterfall" class="waterfall">
  <div class="waterfall-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="waterfall-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="waterfall-item">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <!-- 更多图片 -->
</div>

在CSS中添加以下样式：

.waterfall {
  width: 100%;
  position: relative;
}

.waterfall-item {
  width: 30%;
  float: left;
  margin-bottom: 10px;
}

.waterfall-item img {
  width: 100%;
  height: auto;
}

在JavaScript中添加以下代码：

$(document).ready(function() {
  var $waterfall = $('.waterfall');
  var $waterfallItem = $('.waterfall-item');
  var itemWidth = $waterfallItem.width();
  var columnCount = Math.floor($waterfall.width() / itemWidth);

  $waterfall.css('width', columnCount * itemWidth);

  function layout() {
    var $items = $('.waterfall-item');
    var $columns = $waterfall.find('.column');

    $items.each(function() {
      var $this = $(this);
      var $column = $columns.eq(Math.min($columns.length - 1, Math.floor($this.outerHeight() / itemWidth)));
      $column.append($this);
    });
  }

  layout();

  $(window).resize(layout);
});

2. 实战效果

通过以上代码，您将实现瀑布流布局。当窗口大小改变时，布局将自动调整。

项目七：实现无限滚动

无限滚动是一种常见的网页设计元素，可以让用户在网页中无限滚动浏览。下面我将为您介绍如何使用jQuery实现无限滚动。

1. 准备工作

在HTML中添加以下结构：

<div id="infinite-scroll" class="infinite-scroll">
  <div class="infinite-item">
    <h2>第一项</h2>
    <p>这里是第一项的内容。</p>
  </div>
  <div class="infinite-item">
    <h2>第二项</h2>
    <p>这里是第二项的内容。</p>
  </div>
  <div class="infinite-item">
    <h2>第三项</h2>
    <p>这里是第三项的内容。</p>
  </div>
  <!-- 更多项 -->
</div>

在CSS中添加以下样式：

.infinite-scroll {
  width: 100%;
  position: relative;
}

.infinite-item {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}

.infinite-item h2 {
  font-size: 20px;
  font-weight: bold;
}

.infinite-item p {
  font-size: 16px;
}

在JavaScript中添加以下代码：

$(document).ready(function() {
  var $infiniteScroll = $('#infinite-scroll');
  var $infiniteItem = $('.infinite-item');
  var itemCount = 10; // 初始项数
  var loadMoreCount = 5; // 每次加载更多项数

  function loadMoreItems() {
    for (var i = 0; i < loadMoreCount; i++) {
      var $newItem = $infiniteItem.clone().appendTo($infiniteScroll);
      $newItem.find('h2').text('第' + (itemCount + i) + '项');
      $newItem.find('p').text('这里是第' + (itemCount + i) + '项的内容。');
    }
    itemCount += loadMoreCount;
  }

  loadMoreItems();

  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    var scrollBottom = scrollTop + $(window).height();
    var $lastItem = $infiniteScroll.find('.infinite-item').last();

    if (scrollBottom >= $lastItem.offset().top) {
      loadMoreItems();
    }
  });
});

2. 实战效果

通过以上代码，您将实现无限滚动功能。当用户滚动到页面底部时，将自动加载更多项。

项目八：实现图片放大镜效果

图片放大镜效果是一种常见的网页设计元素，可以让用户放大图片的局部区域。下面我将为您介绍如何使用jQuery实现图片放大镜效果。

1. 准备工作

在HTML中添加以下结构：

<div id="magnifier" class="magnifier">
  <img src="image1.jpg" alt="Image 1">
  <div class="magnifier-preview"></div>
</div>

在CSS中添加以下样式：

.magnifier {
  position: relative;
  width: 300px;
  height: 300px;
}

.magnifier img {
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.magnifier-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  overflow: hidden;
  display: none;
}

.magnifier img:hover + .magnifier-preview {
  display: block;
}

.magnifier-preview img {
  width: 300%;
  height: 300%;
  position: absolute;
  top: 0;
  left: 0;
}

在JavaScript中添加以下代码：

$(document).ready(function() {
  var $magnifier = $('#magnifier');
  var $magnifierImg = $magnifier.find('img');
  var $magnifierPreview = $magnifier.find('.magnifier-preview');
  var $magnifierPreviewImg = $magnifierPreview.find('img');

  $magnifierImg.mousemove(function(e) {
    var offsetX = e.pageX - $magnifier.offset().left;
    var offsetY = e.pageY - $magnifier.offset().top;
    var x = offsetX - $magnifierPreview.width() / 2;
    var y = offsetY - $magnifierPreview.height() / 2;

    if (x < 0) x = 0;
    if (x > $magnifier.width() - $magnifierPreview.width()) x = $magnifier.width() - $magnifierPreview.width();
    if (y < 0) y = 0;
    if (y > $magnifier.height() - $magnifierPreview.height()) y = $magnifier.height() - $magnifierPreview.height();

    $magnifierPreview.css({ left: x, top: y });
    $magnifierPreviewImg.css({ left: -x * 3, top: -y * 3 });
  });
});

2. 实战效果

通过以上代码，您将实现图片放大镜效果。当用户将鼠标悬停在图片上时，图片的局部区域将自动放大。

项目九：实现响应式图片切换效果

响应式图片切换效果是一种常见的网页设计元素，可以让用户在网页中切换不同尺寸的图片。下面我将为您介绍如何使用jQuery实现响应式图片切换效果。

1. 准备工作

在HTML中添加以下结构：

<div id="responsive-image" class="responsive-image">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2" class="hidden">
  <img src="image3.jpg" alt="Image 3" class="hidden">
</div>

在CSS中添加以下样式：

.responsive-image img {
  width: 100%;
  height: auto;
}

.hidden {
  display: none;
}

在JavaScript中添加以下代码：

$(document).ready(function() {
  var $responsiveImage = $('#responsive-image');
  var $images = $responsiveImage.find('img');

  $(window).resize(function() {
    var windowWidth = $(window).width();
    if (windowWidth < 600) {
      $images.eq(0).removeClass('hidden');
      $images.not(':eq(0)').addClass('hidden');
    } else {
      $images.removeClass('hidden');
    }
  }).trigger('resize');
});

2. 实战效果

通过以上代码，您将实现响应式图片切换效果。当窗口宽度小于600px时，只显示第一张图片；当窗口宽度大于或等于600px时，显示所有图片。

项目十：实现动态表格排序

动态

-- 展开阅读全文 --