今天40

jquery有趣的小程序

原标题：jquery有趣的小程序

导读：

在日常生活中，我们经常与各种网页打交道，而 jQuery 作为一款优秀的 JavaScript 库，让网页开发变得更加简单有趣，今天就来和大家分享一下如何用 jQuery 制作...

在日常生活中，我们经常与各种网页打交道，而 jQuery 作为一款优秀的 JavaScript 库，让网页开发变得更加简单有趣，今天就来和大家分享一下如何用 jQuery 制作一些有趣的小程序,让我们的网页变得更加生动活泼。

图片轮播

图片轮播是网页中常见的效果，运用 jQuery 可以轻松实现，我们需要准备一个包含多张图片的列表，通过 jQuery 的 animate 函数和 setInterval 方法,让图片像幻灯片一样轮播。

以下是具体代码实现：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .slider {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        .slider ul {
            position: absolute;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .slider ul li {
            display: inline;
        }
    </style>
</head>
<body>
<div class="slider">
    <ul>
        <li><img src="image1.jpg" alt="image1"></li>
        <li><img src="image2.jpg" alt="image2"></li>
        <li><img src="image3.jpg" alt="image3"></li>
    </ul>
</div>
<script>
    $(document).ready(function(){
        var imgWidth = $('.slider ul li').width();
        var imgCount = $('.slider ul li').length;
        var totalWidth = imgWidth * imgCount;
        $('.slider ul').css('width', totalWidth);
        function moveRight() {
            $('.slider ul').animate({
                left: '-=' + imgWidth
            }, 1000, function(){
                $('.slider ul li:last').after($('.slider ul li:first'));
                $('.slider ul').css('left', 0);
            });
        }
        setInterval(moveRight, 3000);
    });
</script>
</body>
</html>

动态添加列表项

我们希望在网页中动态地添加列表项，使用 jQuery，我们可以轻松实现这一功能,以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<ul id="myList">
    <li>列表项 1</li>
    <li>列表项 2</li>
</ul>
<button onclick="addItem()">添加列表项</button>
<script>
    function addItem() {
        var newItem = $('<li>列表项 ' + ($('#myList li').length + 1) + '</li>');
        $('#myList').append(newItem);
    }
</script>
</body>
</html>

折叠菜单

折叠菜单在网页中也很常见，比如导航栏、侧边栏等,下面是一个简单的折叠菜单实现：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .accordion {
            width: 300px;
            background-color: #eee;
            border: 1px solid #aaa;
        }
        .accordion h3 {
            padding: 10px;
            background-color: #ccc;
            cursor: pointer;
        }
        .accordion div {
            padding: 10px;
            display: none;
        }
    </style>
</head>
<body>
<div class="accordion">
    <h3>菜单 1</h3>
    <div>内容 1</div>
    <h3>菜单 2</h3>
    <div>内容 2</div>
    <h3>菜单 3</h3>
    <div>内容 3</div>
</div>
<script>
    $(document).ready(function(){
        $('.accordion h3').click(function(){
            $(this).next('div').slideToggle();
        });
    });
</script>
</body>
</html>

通过以上三个例子，我们可以看到 jQuery 的强大功能，jQuery 还有很多其他有趣的特效和应用，这里只是抛砖引玉，在实际开发过程中，我们可以根据自己的需求，灵活运用 jQuery，让网页变得更加丰富多彩，下面还有一些小技巧,大家可以尝试：

使用 $.ajax 实现异步请求,让网页与服务器进行数据交互；
利用 $.animate 实现各种动画效果，如放大、缩小、淡入淡出等；
通过 $.delegate 实现事件委托,提高事件处理效率。

就是关于 jQuery 有趣小程序的分享，希望对大家有所帮助，在未来的日子里，不妨动手试试,让我们的网页更加生动有趣！

原标题：jquery有趣的小程序

相关文章

目录[+]