【H5】文字横向滚动

神算子希晨

已于 2022-11-22 01:31:45 修改

阅读量1.5k

点赞数 1

分类专栏： H5小案例文章标签： javascript html css jquery

于 2022-11-22 01:27:45 首次发布

本文链接：https://blog.csdn.net/tsy1234567891/article/details/127975322

版权

H5小案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

相关知识：H5基础，css基础，js基础

~~转载注明本文出处即可~~

本文共分为三部分：分别为gif演示，原理解析，实现步骤

源代码请点击文末链接下载

个人才疏浅陋，若有错误请谅解。

一、gif演示

gif演示如下：

二、原理解析

像上面的从做到右的滚动效果，相当于文字本身乘坐了有轨电车，当电车向左或者向右移动的时候，文字跟随移动，那么文字本身相对于电车是静止不动的，这样我们就得把文字和电车做成绝对布局，文字（position:absolute）在电车上静止（position:relative），分析好文字本身是如何移动的之后，我们接下来关注电车是如何移动的。

按照我们日常的生活经验，电车想要从b站点到a站点，电车的头部到a站点的距离就是电车走到站点a的距离，但是我们文字滚动的时候是要整个电车走出站点a，直到我们看不见，那么必然是车尾到站点a的距离c+w，一边情况下，我们会要求电车匀速的在轨道上面跑，所以要设置一个速度speed，同样在实际生活中，电车是从b站点一个接着一个不停的循环跑的，所以我们采用函数的递归使其不停地运动起来。如果当公路工作人员突然想要在有轨电车排查人员（鼠标移到上面），电车是要停车的，此时我们要刹车停下（清除这个重复移动的过程），当工作人员离开时，电车也要重新运作起来（开启按刚才的运动）。

总结起来就是一句话，文字滚动就是不停的缩小（向左走）或放大（向右走）距离c+w。鼠标选定时候要清除动画，鼠标移开要回复滚动。

三、实现步骤

首先在你的文本编辑器或者集成开发环境中创建一个基本的H5界面，

然后在head标签中添加jQuery的引入，你可以先去下载一个jQuery，任意版本应该都可以。

然后我们搭建基本显示的文本位置，如下：

接着我们根据上面分析的原理，此时aaa应当是note的载体，note应当相对于aaa固定，我们使用css来固定，并给它们添加一点样式，所以按照以下写法

其中：position:relative/absolute;用于定位，white-space:nowrap是去除连续空格，当然换行也会被去除，overflow:hidden是隐藏滚动条

写好上面的代码以后，会有一下静态效果，

接下来我们开始让他动起来了

首先创建一个函数，noteScroll()便是文字滚动函数，并且把动画函数放在电车身上（aaa）然后让界面加载好就运行

好的，我们开始设置一些初始化的变量

使用函数runtime控制每次代用的时长和运动过的举例（走过的距离）

接着写动画的执行函数ani，并且递归ani函数让他一直运动起来。（不理解jQuery的animate动画函数可以百度一下，我会在附录加入对这个的讲解一下文章连接）

接着就是鼠标的悬停与移开时候动画的关闭与开启

最后还是要开启动画

四、附录

1、jQuery中动画函数animate的用法详解【转】 - 小猿笔记 - 博客园 (cnblogs.com)

2、百度链接提取码：ppp1

3、源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body> 
    <div id="aaa" style="width:100%; position:relative; white-space:nowrap; overflow:hidden; height:20px;"> 
        <div id="note" style="position:absolute; top:0; height:20px;">
            <span>文字横向滚动</span>
        </div> 
    </div>
    <script type="text/javascript">
        $.fn.noteScroll=function(){
            var p = $(this), c = p.children(), speed=2500; 
            var cw = c.width(),pw=p.width(); 
			var t = (cw / 100) * speed; 
			var f = null, t1 = 0; 

            function runtime() {
			    f = setInterval(function(){t1 += 10;},10); 
			}

            function ani(tm) { 
			    runtime(); 
			     c.animate({left:-cw},tm,"linear",
                    function(){
                        c.css({left:pw});clearInterval(f);t1=0;t=((cw+pw)/100)*speed;
                        ani(t);
			        }); 
			} 

            p.on({
                mouseenter: function () { 
			                c.stop(false, false); 
			                clearInterval(f);
			                },  
                mouseleave: function () {
			                ani(t - t1); 
			                }  
                }); 

            ani(t); 
        };
        
		$(function(){
            $("#aaa").noteScroll();
		});
        
    </script>
</body>
</html>