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

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. #贪心#CF605A Sorting Railway Cars

    题目 一个长度为 \(n\) 的排列,每次可以将一个数移至开头或者结尾,问最少多少次使其升序排列 分析 让数字连续的情况尽量多才能让移出来的次数尽量少, 找到最长的数字连续段,若其长度为 \(len\ ...

  2. Codeforces Round #726 (Div. 2)

    CF1537A Arithmetic Array 洛谷传送门 CF1537A 分析 用这 \(n\) 个数的总和 \(sum\) 判断: 如果 \(sum<n\) 直接用 \(n-sum+1\) ...

  3. nginx集成brotli压缩算法

    本文于2017年2月中旬完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. Google开源Brotli压缩算法 Brotli是一种全新的数据 ...

  4. 内存分析利器之UMDH

    近两周投入分析产品的内存泄漏问题. 测试团队反馈产品在安卓平台运行时,随用户操作,应用占用的内存出现上涨的趋势,停止操作并等待一段时间之后,应用占用的内存没有下降,怀疑存在内存泄漏问题. 结合复现的情 ...

  5. Python 简介和用途

    什么是Python? Python是一种流行的编程语言,由Guido van Rossum创建,并于1991年发布. 它用于以下领域: 网页开发(服务器端) 软件开发 数学 系统脚本编写 Python ...

  6. 自动编号工具类：NumAutoUtils详解

    在软件开发中,经常需要生成唯一的编号,例如订单号.发票号.实验编号等.为了简化这一过程,本文将介绍一个Java工具类NumAutoUtils,它可以帮助我们生成带有前缀和日期的自动编号. 概述 Num ...

  7. HarmonyOS：NativeWindow 开发指导

      场景介绍 NativeWindow是HarmonyOS本地平台化窗口,表示图形队列的生产者端.开发者可以通过NativeWindow接口进行申请和提交Buffer,配置Buffer属性信息. 针对 ...

  8. Lite Actor：方舟Actor并发模型的轻量级优化

    原文:https://mp.weixin.qq.com/s/8biIBddpy6GKgakazg1vcg,点击链接查看更多技术内容. 并发模型是用来实现不同应用场景中并发任务的编程模型,通过合理地使用 ...

  9. Mysql之GTID

    一.GTID Mysql5.6引入GTID(Global Transaction IDs),多线程复制: 由服务器的UUID和事务ID号组成唯一标识某一个主机的某个事务的ID号: 每一个事务首部都有G ...

  10. Android开发 Error:The number of method references in a .dex file cannot exceed 64K.Android开发 Error:The number of method references in a .dex file cannot exceed 64K

    前言 错误起因: 在Android系统中,一个App的所有代码都在一个Dex文件里面. Dex是一个类似Jar的存储了多有Java编译字节码的归档文件. 因为Android系统使用Dalvik虚拟机, ...