正文

新手必看！从零开始，用jQuery轻松实现5个实用实战项目教程

/0 浏览量
1105

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

1.1 项目背景

图片轮播是网站中常见的功能，可以吸引用户的注意力，展示更多图片内容。本教程将使用jQuery实现一个简单的图片轮播效果。

1.2 技术要点

  • 使用jQuery选择器选择轮播图元素
  • 使用定时器自动切换图片
  • 实现鼠标悬停暂停轮播效果

1.3 实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片轮播效果</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .carousel {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        .carousel img {
            width: 100%;
            height: 100%;
            display: none;
        }
        .carousel img.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <img src="image1.jpg" class="active">
        <img src="image2.jpg">
        <img src="image3.jpg">
    </div>
    <script>
        $(function() {
            var index = 0;
            var $img = $('.carousel img');
            var len = $img.length;
            var timer = setInterval(function() {
                index = (index + 1) % len;
                $img.eq(index).addClass('active').siblings().removeClass('active');
            }, 3000);

            $('.carousel').hover(function() {
                clearInterval(timer);
            }, function() {
                timer = setInterval(function() {
                    index = (index + 1) % len;
                    $img.eq(index).addClass('active').siblings().removeClass('active');
                }, 3000);
            });
        });
    </script>
</body>
</html>

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

2.1 项目背景

响应式导航菜单可以适应不同屏幕尺寸，提高用户体验。本教程将使用jQuery实现一个响应式导航菜单。

2.2 技术要点

  • 使用jQuery选择器选择导航菜单元素
  • 使用媒体查询实现响应式布局
  • 实现鼠标悬停显示子菜单效果

2.3 实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应式导航菜单</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .menu {
            list-style: none;
            overflow: hidden;
            background-color: #333;
        }
        .menu li {
            float: left;
            width: 100px;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }
        .menu li:hover .submenu {
            display: block;
        }
        .submenu {
            display: none;
            position: absolute;
            list-style: none;
            background-color: #333;
        }
        .submenu li {
            width: 100%;
            text-align: center;
            line-height: 30px;
            color: #fff;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li>首页
            <ul class="submenu">
                <li>子菜单1</li>
                <li>子菜单2</li>
                <li>子菜单3</li>
            </ul>
        </li>
        <li>关于我们</li>
        <li>产品中心</li>
        <li>联系我们</li>
    </ul>
    <script>
        $(function() {
            $('.menu li').hover(function() {
                $(this).children('.submenu').stop().slideDown();
            }, function() {
                $(this).children('.submenu').stop().slideUp();
            });
        });
    </script>
</body>
</html>

项目三：实现倒计时功能

3.1 项目背景

倒计时功能常用于活动、促销等场景，提醒用户剩余时间。本教程将使用jQuery实现一个倒计时功能。

3.2 技术要点

  • 使用jQuery选择器选择倒计时元素
  • 使用JavaScript计算剩余时间
  • 实现倒计时效果

3.3 实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>倒计时功能</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .countdown {
            font-size: 24px;
            font-weight: bold;
            color: #f00;
        }
    </style>
</head>
<body>
    <div class="countdown" id="countdown">00:00:00:00</div>
    <script>
        $(function() {
            var endTime = new Date('2023-12-31 23:59:59').getTime();
            var interval = setInterval(function() {
                var now = new Date().getTime();
                var remainingTime = endTime - now;
                var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
                var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
                $('#countdown').text(
                    (days < 10 ? '0' : '') + days + '天' +
                    (hours < 10 ? '0' : '') + hours + '小时' +
                    (minutes < 10 ? '0' : '') + minutes + '分钟' +
                    (seconds < 10 ? '0' : '') + seconds + '秒'
                );
                if (remainingTime < 0) {
                    clearInterval(interval);
                    $('#countdown').text('活动已结束');
                }
            }, 1000);
        });
    </script>
</body>
</html>

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

4.1 项目背景

全屏滚动效果可以使页面更具动态感，提升用户体验。本教程将使用jQuery实现一个全屏滚动效果。

4.2 技术要点

  • 使用jQuery选择器选择滚动元素
  • 使用CSS实现全屏布局
  • 实现鼠标滚动切换页面效果

4.3 实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>全屏滚动效果</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        .section {
            width: 100%;
            height: 100vh;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: #333;
        }
        .section:nth-child(1) {
            background-color: #fff;
        }
        .section:nth-child(2) {
            background-color: #ccc;
        }
        .section:nth-child(3) {
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
    <script>
        $(function() {
            $(window).scroll(function() {
                var scrollTop = $(window).scrollTop();
                var windowHeight = $(window).height();
                $('.section').each(function() {
                    var sectionTop = $(this).offset().top;
                    var sectionHeight = $(this).height();
                    if (scrollTop + windowHeight >= sectionTop && scrollTop + windowHeight <= sectionTop + sectionHeight) {
                        $(this).addClass('active').siblings().removeClass('active');
                    }
                });
            });
        });
    </script>
</body>
</html>

项目五：实现瀑布流布局

5.1 项目背景

瀑布流布局可以使图片等元素均匀地分布在页面中，提高页面美观度。本教程将使用jQuery实现一个瀑布流布局。

5.2 技术要点

  • 使用jQuery选择器选择瀑布流元素
  • 使用CSS实现瀑布流布局
  • 实现图片自动加载效果

5.3 实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .waterfall {
            width: 100%;
            column-count: 4;
            column-gap: 10px;
        }
        .waterfall img {
            width: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <div class="waterfall">
        <img src="image1.jpg" alt="图片1">
        <img src="image2.jpg" alt="图片2">
        <img src="image3.jpg" alt="图片3">
        <img src="image4.jpg" alt="图片4">
        <img src="image5.jpg" alt="图片5">
        <img src="image6.jpg" alt="图片6">
        <img src="image7.jpg" alt="图片7">
        <img src="image8.jpg" alt="图片8">
        <img src="image9.jpg" alt="图片9">
        <img src="image10.jpg" alt="图片10">
    </div>
    <script>
        $(function() {
            $(window).scroll(function() {
                var $img = $('.waterfall img');
                var lastImgTop = $img.last().offset().top;
                var windowHeight = $(window).height();
                if ($(window).scrollTop() + windowHeight >= lastImgTop) {
                    for (var i = 0; i < 5; i++) {
                        var img = new Image();
                        img.src = 'image' + (i + 11) + '.jpg';
                        img.onload = function() {
                            $('.waterfall').append(img);
                        };
                    }
                }
            });
        });
    </script>
</body>
</html>

通过以上五个实战项目，相信你已经掌握了jQuery的基本用法。在实际开发中，你可以根据需求调整代码，实现更多有趣的功能。祝你学习愉快！

-- 展开阅读全文 --