文字滚动效果(附加源码)

最新推荐文章于 2025-03-01 22:45:13 发布

杨大东

最新推荐文章于 2025-03-01 22:45:13 发布

阅读量502

点赞数 8

文章标签： javascript html5 css3

本文链接：https://blog.youkuaiyun.com/weixin_45840519/article/details/144401723

版权

总结

开始介绍
功能介绍
页面创建
样式设置
逻辑部分

开始介绍

本次代码主要实现文字滚动效果，开发久了很多功能都是通过框架组件库来完成，突然发现原生的知识点健忘了，专门出一期文章，通过原生js实现一些特定功能，功能也比较简单简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript，在前端中的作用，另外也培养下我们的程序代码思维，那我们本次就通过由简单到复杂循序渐进，这份专栏中我们会带领大家用前端实现手风琴效果、js实现三级联动效果、视频网站中重磅推荐模块、图片放大镜、积分抽奖、拼图、无缝轮播图、图片瀑布流、读心术小游戏等等有趣的小功能，纯前端语言实现，都会陆续带给大家。

功能介绍

用于循环播放展示一组消息通知，可以实现垂直滚动的效果。

页面创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字滚动效果</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
   <div class="container">
        <h1 class="title">最新提示</h1>
        <ul class="list">
            <li>网页三步骤</li>
            <li>创建HTML</li>
            <li>创建引入css</li>
            <li>创建引入js</li>
        </ul>
   </div>
    <script src="./demo.js" defer></script>
</body>
</html>

样式设置

.container{
    background-color: #fffbe8;
    overflow: hidden;
    padding: 20px 0;
}
/* 清除浮动 */
.container::after {
  content: '';
  display: block;
  clear: both;
}

.title{
    float: left;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
    margin-left: 20px;
    margin-top: 5px;
    border-right: 2px solid #ccc;
    padding-right: 20px;
}

.list{
    float: left;
    list-style: none;
    padding: 0;
    height: 30px;
    overflow: hidden;
    margin: 0;
    margin-left: 50px;
}

.list li {
    height: 30px;
    line-height: 30px;
}

逻辑部分

	(function(){
    /**
     * 
     * @param {string} el 
     * @returns 
     */
    function $(el){
        return document.querySelector(el);
    }
    var list = $('.list');
    // 将列表中的第一个元素，克隆到列表的最后一个
    function cloneFirstItem(){
        var firstItem = list.children[0];
        // true  深克隆-元素内容一起  false  浅克隆-只克隆元素本身
        var newItem = firstItem.cloneNode(true);
        // 把第一项放到最后一个，这样能实现轮播效果
        list.appendChild(newItem)
    }

    cloneFirstItem()
    //滚动的时间间隔
    var duration = 2000;
    /**调用这个函数 */
    setInterval(moveNext, duration);
    var itemHeight = 30;//每一项的高度
    var curIndex = 0;//目前展示的第几项
    // 将列表滚动到下一个位置
    function moveNext(){
        var from = curIndex * itemHeight; //开始的滚动高度
        curIndex++;
        var toNext = curIndex * itemHeight;//下一项的滚动高度
        // 让list的scrollTop，从from慢慢变为to,需要有一个动画效果
        // 慢慢变为：在一段时间内，每隔一小段时间，变化一点
        var totalDuration = 300; // 变化的总时间
        var duration = 10; // 变化的间隔时间
        var times = totalDuration / duration; //变化的次数
        var dis = (toNext - from) / times; // 每次变化的量
        var timerId = setInterval(function () {
            from += dis;
            if (from >= toNext) {
              // 到达目标值了
              clearInterval(timerId); // 停止计时器
              // 滚动完成后，如果是最后一项
              if (curIndex === list.children.length - 1) {
                from = 0;
                curIndex = 0;
              }
            }
            list.scrollTop = from;
          }, duration);
    }
})()

基本上到这里就结束了，HTML+css部分很简单，主要是js逻辑功能模块，首先得想到当滚动到最后一个的时候需要把第一项添加到结尾，其次就是每次滚动的高度，开始滚动的高度下一项滚动的高度，再给每次滚动加一个简单的动画效果，显得顺滑一些