一提到文字上下滚动，我们就会想到用不同的程序去实现，而且页面中有文字滚动会增加这个网页的互动和可信度。

1.Js最简单的方法是控制盒子的高度，使不断的重复添加

<html>

<body>

<head>

/**scroll css**/

#scrolldiv{height: 400px;overflow: hidden;}

</head>

<div id="scrolldiv"  class="scroll">

                    <ul id="scroll1">

                        <li>用户130****0834   刚刚  砸中<span class="yellow">500元京东卡</span> 正在兑换中</li>

                        <li>用户176****2746   刚刚  砸中<span class="yellow">1000美元赠金</span> 正在兑换中</li>

                        <li>用户132****7754   刚刚  砸中<span class="yellow">500元京东卡</span> 正在兑换中</li>

                        <li>用户181****4518 1分钟前 砸中<span class="yellow">U盘+高级笔+充电宝</span> 正在兑换中</li>

                        <li>用户185****5483 1分钟前 砸中<span class="yellow">品牌热销保温杯</span> 正在兑换中</li>

                        <li>用户158****7375 2分钟前 砸中<span class="yellow">外汇交易书+高级伞+手机支架+海马刀</span> 正在兑换中</li>

                        <li>用户130****6766 3分钟前 砸中<span class="yellow">1000美元赠金</span> 已成功兑换</li>

                        <li>用户170****2437 5分钟前 砸中<span class="yellow">U盘+高级笔+充电宝</span> 已成功兑换</li>

                        <li>用户156****2475 5分钟前 砸中<span class="yellow">品牌热销保温杯</span> 已成功兑换</li>

                        <li>用户189****1698 7分钟前 砸中<span class="yellow">500元京东卡</span> 已成功兑换</li>

                        <li>用户132****1754 8分钟前 砸中<span class="yellow">1000美元赠金</span> 已成功兑换</li>

                        <li>用户177****2154 9分钟前 砸中<span class="yellow">外汇交易书+高级伞+手机支架+海马刀</span> 已成功兑换</li>

                    </ul>

                    <ul id="scroll2"></ul>

                </div>

<script>

    /**word scroll css**/

        window.onload = roll(40);

        function roll(t) {

            var scroll1 = document.getElementById("scroll1");

            var scroll2= document.getElementById("scroll2");

            var scrolldiv = document.getElementById("scrolldiv");
//把内容重复复制，达到滚动不间断的效果

            scroll2.innerHTML = scroll1.innerHTML;

            scrolldiv.scrollTop = 0;

         setInterval(rollStart, t);

        }

        function rollStart() {

            if (scrolldiv.scrollTop >= scroll1.scrollHeight) {

                scrolldiv.scrollTop = 0;

            } else {

                scrolldiv.scrollTop++;

            }

        }

</script>

</body>

</html>

2.Vuejs实现文字上线滚动

前端代码呈现：

<div class="scroll">

                    <ul id="scrollDiv"  ref="rollul" :class="{anim:animate==true}">

                        <li v-for="item in scroll_lists"><span>{{item.time}}</span><span class="s-2">{{randomPhoneNumber()}}用户诊断了</span><span>{{item.company}}</span></li>

                    </ul>

                </div>

数据结构设计：

<script>

new Vue({

        el:'#app',

        data(){

            return{

                animate:false,

        scroll_lists:[

            {time:'2秒钟前',company:'海康威视（002415）'},

            {time:'8秒钟前',company:'烽火通信（600498）'},

            {time:'3分钟前',company:'恒逸石化（000703）'},

            {time:'5分钟前',company:'紫光国微（002049）'},

            {time:'39分钟前',company:'新天科技（300259）'},

            {time:'1小时前',company:'兴业银行（601166）'},

            {time:'3小时前',company:'中国核建（601611）'}

        ],

    };

    },
 //created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

//mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

    created(){

        setInterval(this.scroll,2000)

    },

    methods:{

        // 根据字典生成随机序列

     randomCode:function (len,dict) {

    for (var i = 0,rs = ''; i < len; i++)

        rs += dict.charAt(Math.floor(Math.random() * 100000000) % dict.length);

    return rs;

},

// 生成随机手机号码

randomPhoneNumber:function(){

   // 第1位是1 第2,3位是3458 第4-7位是* 最后四位随机 this.$options.methods使用上一个函数的返回值
 return [1,this.$options.methods.randomCode(2,'3458'),'****',this.$options.methods.randomCode(4,'0123456789')].join(''); }, scroll(){ this.animate = true         var that = this;       setTimeout(function(){              that.scroll_lists.push(that.scroll_lists[0]);             that.scroll_lists.shift();             that.animate=false; },1500) } } }) </script>

VueJS和Javascript实现文字上下滚动效果的更多相关文章

  1. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  2. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  3. DIV+javascript实现首尾相连循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

    www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

  5. 使用javascript开发的视差滚动效果的云彩

    在线演示 jquery.parallax.js是一款能够帮助你快速开发视差效果的jQuery插件,在这里我们使用它来开发一款漂亮的云朵视差效果. 主要代码: Javascript ........ 阅 ...

  6. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  7. jquery实现文字上下滚动效果

    文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...

  8. jquery实现多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...

  9. jquery文字纵向滚动效果（带间隔停留）

    <script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotati ...

  10. TextView实现文字水平滚动效果

    有时候我们使用TextView显示文本,只想把所有内容用一行显示出来,但是一行又显示不完,就需要让文本实现水平滚动的效果. 具体实现方法如下: 1,实现自定义TextView并实现isFocused( ...

随机推荐

  1. #构造#B 连通子图

    题目 给定正整数\(k\),构造一棵树,使得包含了\(1\)号点的连通子图个数恰好为\(k\). 连通子图就是点集的一个子集(可以为全集),使得该点集中任意两个点均可以经过该点集中的点相互到达. 分析 ...

  2. HttpOnly的笔记

    HttpOnly是什么 简单的说: HttpOnly是Cookie的属性: Web服务器通过为Cookie设置这个属性,告诉浏览器应当避免页面端的脚本访问对应Cookie的值,保证被Cookie承载的 ...

  3. BI工具的应用能给企业带来哪些帮助？

    大数据时代的到来,加快了企业的信息化进程,越来越多的企业选择应用BI工具于企业的日常经营运作之中.BI即商业智能,我们可以将其理解其为改善业务经营决策的一套解决方案.经过多年的发展,BI已经从最初的& ...

  4. mysql 重新整理——索引优化explain字段介绍一 [九]

    前言 在七种介绍了explain这东西,那么具体来看下它是如何来运行的吧. 正文 id 来看一条语句:EXPLAIN select * from departments,dept_emp,employ ...

  5. c#程序员必学清单

    必读书目:1. "Effective C#: 50 Specific Ways to Improve Your C#" by Bill Wagner2. "CLR via ...

  6. 力扣612(MySQL)-平面上的最近距离（中等）

    题目: 表 point_2d 保存了所有点(多于 2 个点)的坐标 (x,y) ,这些点在平面上两两不重合.写一个查询语句找到两点之间的最近距离,保留 2 位小数. 最近距离在点 (-1,-1) 和( ...

  7. 力扣183(MySQL)-从不订购的客户（简单）

    题目: 某网站包含两个表,Customers 表和 Orders 表.编写一个 SQL 查询,找出所有从不订购任何东西的客户. Customers 表: Orders 表:  解题思路: 需要查询出没 ...

  8. 10亿+文件数压测，阿里云JindoFS轻松应对

    简介: Apache Hadoop FileSystem (HDFS) 是被广为使用的大数据存储方案,其核心元数据服务 NameNode 将全部元数据存放在内存中,因此所能承载的元数据规模受限于内存, ...

  9. 入选 SIGMOD2021 的时间序列多周期检测通用框架 RobustPeriod 如何支撑阿里业务场景？

    简介: 本文除了介绍RobustPeriod的核心技术亮点,还将重点解释如何将它构筑成服务来解决阿里云的业务痛点. 近日,由阿里云计算平台和阿里云达摩院合作的时序多周期检测相关论文RobustPeri ...

  10. 源码解读：KubeVela 是如何将 appfile 转换为 K8s 特定资源对象的

    简介: KubeVela 是一个简单易用又高度可扩展的云原生应用管理引擎,是基于 Kubernetes 及阿里云与微软云共同发布的云原生应用开发模型 OAM 构建.本文主要目的是探索 KubeVela ...