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

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. .NET开源、免费、跨平台的Git可视化管理工具

    前言 俗话说得好"工欲善其事,必先利其器",合理的选择和使用可视化的管理工具可以降低技术入门和使用的门槛.今天大姚给大家分享一款.NET Avalonia开源.免费.跨平台.快速的 ...

  2. Avalonia的Window生命周期

    Avalonia中的Window 在Avalonia中,Window是一个基本的UI元素,它代表了一个应用程序的窗口.每个Window都可以包含其他的UI元素,如按钮.文本框等,并可以响应各种用户输入 ...

  3. #最大流#WOJ 124 Football Coach

    题目 有\(n\)支球队,互相之间已经进行了一些比赛.现在还有\(m\)场比赛未进行, 每场比赛胜者得2分,平局各得1分,负者不得分. 问是否存在一种方法使得球队\(n\)的得分比其他\(n-1\)支 ...

  4. 深入理解HashMap和TreeMap的区别

    目录 简介 HashMap和TreeMap本质区别 排序区别 Null值的区别 性能区别 共同点 深入理解HashMap和TreeMap的区别 简介 HashMap和TreeMap是Map家族中非常常 ...

  5. 战码先锋直播预告丨参与文档贡献，开启OpenHarmony社区贡献之旅

    OpenAtom OpenHarmony(以下简称"OpenHarmony")工作委员会首度发起「OpenHarmony开源贡献者计划」(本期OpenHarmony开源贡献者计划以 ...

  6. openGauss/MogDB配置IPv6

    openGauss/MogDB 配置 IPv6 openGauss/MogDB 支持多种网络接口,假如我们想在支持 IPv6 的网络上部署使用,只需简单操作即可,本文将介绍在 Centos 上如何配置 ...

  7. openGauss2.1.0在openEuler 20.03 LTS SP2 安装后，yum无法使用的问题解决

    openGauss2.1.0 在 openEuler 20.03 LTS SP2 安装后,yum 无法使用的问题解决 一.环境描述 操作系统: openEuler 20.03 LTS openEule ...

  8. 支持API 9的Sample已上新，速来拿走

    原文:https://mp.weixin.qq.com/s/sPDG5sG5F_gTp0cE1VV3gQ,点击链接查看更多技术内容.   今年的华为开发者大会上我们发布了HarmonyOS 3.1 D ...

  9. 第八篇：socket网络编程

    一.网络编程简绍 二.socket连接过程 三.socket文件传输 四.socket循环接收 五.socket粘包处理 六.FTP文件传输 七.socketServer 八.web框架 #!/usr ...

  10. Excel 分组后计算

    分组后的计算都类似,仍然采用 groups 函数,分组并同时计算出各洲的 GDP 总量,然后再求一遍各洲的 GDP 总量占全球 GDP 的百分比值. SPL 代码如下:   A B 1 =clipbo ...