对于“基于jquery的滚动新闻列表”的完整攻略，我会详细的讲解如下：

1. 准备工作

在开始制作滚动新闻列表之前，你需要先引入jQuery库，因为这个滚动新闻列表是基于jQuery实现的。

通过在head标签中添加以下代码来引入jQuery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. 搭建基本框架

接下来，我们需要先搭建一个基本的框架，方便我们进行布局的操作。框架可参考以下代码：

<div class="scrollNews">
    <div class="title">
        <h3>滚动新闻列表</h3>
    </div>
    <div class="content">
        <ul>
            <li>这是新闻1</li>
            <li>这是新闻2</li>
            <li>这是新闻3</li>
            <li>这是新闻4</li>
            <li>这是新闻5</li>
        </ul>
    </div>
</div>

在上面的框架中，我们通过div标签来创建一个名为scrollNews的容器，并在容器中创建一个名为title的容器，用于展示滚动新闻列表的标题。在title容器的内部，我们使用了h3标签来展示滚动新闻列表的标题文字。

在scrollNews容器中，我们还创建了一个名为content的容器，用于展示滚动新闻列表的内容。在content容器的内部，我们使用了ul标签来创建一个无序列表，每一个列表项即为一篇新闻。

3. CSS 样式

为了让我们的滚动新闻列表看起来更加美观，我们需要对其进行样式的设置。

以下是基本的样式设置：

.scrollNews {
    width: 400px;
    height: 100px;
    border: 1px dashed #ccc;
    overflow: hidden;
    position: relative;
}
.title {
    height: 20px;
    background-color: #f5f5f5;
    text-align: center;
}
.content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
}
li {
    height: 20px;
    line-height: 20px;
}

在上面的样式中，我们设置了滚动新闻列表的宽度、高度、边框等基本样式；将title和content容器设置为绝对定位；将ul的样式设置为无序列表的基本样式。另外，一定要注意将ul的position属性设置为绝对定位，以便于我们后续实现滚动效果。

4. JS 实现

接下来，我们需要在jQuery的帮助下，实现滚动新闻列表的滚动效果。

请参考以下代码：

$(function() {
    // 获取滚动容器
    var $content = $('.content');
    // 设置滚动速度
    var scrollSpeed = 100;
    // 获取所有新闻
    var $lis = $content.find('li');

    // 如果新闻数量大于等于3，则进行滚动
    if ($lis.length >= 3) {
        // 复制前两个新闻，添加到新闻最后
        $content.append($lis.eq(0).clone());
        $content.append($lis.eq(1).clone());
        // 计算滚动区域高度
        var scrollHeight = $lis.eq(0).outerHeight() * 3;
        // 设置滚动区域高度
        $content.css('height', scrollHeight);
        // 定时滚动
        setInterval(function() {
            // 移动第一个新闻，添加到末尾
            $content.find('li:first').animate({ marginTop: -scrollHeight }, scrollSpeed, function() {
                $(this).css('marginTop', 0).appendTo($content);
            });
        }, 3000);
    }
});

在上面的代码中，我们使用了jQuery提供的animate方法来实现滚动效果。首先，我们获取到滚动容器、新闻列表，然后判断新闻数量是否大于等于3，如果是，则进行滚动。然后我们将新闻列表中前两个新闻复制一份，并添加到新闻列表末尾；计算出滚动区域高度；然后使用定时器，每三秒钟滚动一次。这里使用了animate方法，将第一个新闻项向上移动一个滚动区域高度，并在动画完成时，将该新闻移动到末尾，以此实现滚动效果。

5. 示例说明

为了更好的理解上面的代码，我们再看两条示例说明：

示例 1

HTML 代码

<div class="scrollNews">
    <div class="title">
        <h3>公司新闻</h3>
    </div>
    <div class="content">
        <ul>
            <li>欢迎加入我们</li>
            <li>欢迎来新闻中心</li>
            <li>我们发布了重大新闻</li>
            <li>我们的团队成员再次扩大</li>
            <li>我们将要上市了</li>
            <li>欢迎来新闻中心</li>
            <li>我们发布了重大新闻</li>
        </ul>
    </div>
</div>

CSS 样式

.scrollNews {
    width: 400px;
    height: 100px;
    border: 1px dashed #ccc;
    overflow: hidden;
    position: relative;
}
.title {
    height: 20px;
    background-color: #f5f5f5;
    text-align: center;
}
.content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
}
li {
    height: 20px;
    line-height: 20px;
}

JS 代码

$(function() {
    // 获取滚动容器
    var $content = $('.content');
    // 设置滚动速度
    var scrollSpeed = 100;
    // 获取所有新闻
    var $lis = $content.find('li');

    // 如果新闻数量大于等于3，则进行滚动
    if ($lis.length >= 3) {
        // 复制前两个新闻，添加到新闻最后
        $content.append($lis.eq(0).clone());
        $content.append($lis.eq(1).clone());
        // 计算滚动区域高度
        var scrollHeight = $lis.eq(0).outerHeight() * 3;
        // 设置滚动区域高度
        $content.css('height', scrollHeight);
        // 定时滚动
        setInterval(function() {
            // 移动第一个新闻，添加到末尾
            $content.find('li:first').animate({ marginTop: -scrollHeight }, scrollSpeed, function() {
                $(this).css('marginTop', 0).appendTo($content);
            });
        }, 3000);
    }
});

示例 2

HTML 代码

<div class="scrollNews">
    <div class="title">
        <h3>行业新闻</h3>
    </div>
    <div class="content">
        <ul>
            <li>夏季降温这样做</li>
            <li>2021年支付宝新功能盘点</li>
            <li>共享单车之家将于近期上线</li>
            <li>公交单车基础设施建设创新产品竞赛大赛</li>
            <li>中国科技快讯：人工智能</li>
            <li>微信小程序领先者罗列一览</li>
            <li>最新一期出版业者的状况盘点</li>
        </ul>
    </div>
</div>

CSS 样式

.scrollNews {
    width: 500px;
    height: 120px;
    border: 2px solid #999;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
}
.title {
    height: 28px;
    background-color: #eee;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 28px;
}
.content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
}
li {
    height: 24px;
    line-height: 24px;
    margin-left: 20px;
}

JS 代码

$(function() {
    // 获取滚动容器
    var $content = $('.content');
    // 设置滚动速度
    var scrollSpeed = 100;
    // 获取所有新闻
    var $lis = $content.find('li');

    // 如果新闻数量大于等于3，则进行滚动
    if ($lis.length >= 3) {
        // 复制前两个新闻，添加到新闻最后
        $content.append($lis.eq(0).clone());
        $content.append($lis.eq(1).clone());
        // 计算滚动区域高度
        var scrollHeight = $lis.eq(0).outerHeight() * 3;
        // 设置滚动区域高度
        $content.css('height', scrollHeight);
        // 定时滚动
        setInterval(function() {
            // 移动第一个新闻，添加到末尾
            $content.find('li:first').animate({ marginTop: -scrollHeight }, scrollSpeed, function() {
                $(this).css('marginTop', 0).appendTo($content);
            });
        }, 3000);
    }
});

以上两个示例是基于jQuery实现的滚动新闻列表的完整攻略，希望能够对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jquery的滚动新闻列表 - Python技术站

基于jquery的滚动新闻列表

1. 准备工作

2. 搭建基本框架

3. CSS 样式

4. JS 实现

5. 示例说明

示例 1

HTML 代码

CSS 样式

JS 代码

示例 2

HTML 代码

CSS 样式

JS 代码

相关文章