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

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. chrome开发者工具

    官方文档 使用 DevTools 的工作区设置持久化 By Dave Gash Dave is a Tech Writer By Kayce Basques Technical Writer for ...

  2. 2 JavaScript的基础类型

    2 JavaScript的基础类型 JS虽然是一个脚本语言. 麻雀虽小, 五脏俱全. 在js中也是可以像其他编程语言一样. 声明变量, 条件判断, 流程控制等等. 我们先看一下JS中的数据类型 在js ...

  3. #平衡树#洛谷 2611 [ZJOI2012]小蓝的好友

    题目 在 \(R\times C\) 的矩形中,问有多少个子矩形使得存在一个给定点在其中, 保证点随机,\(R,C\leq 4\times 10^4,n\leq 10^5\) 分析 考虑容斥,用总方案 ...

  4. #线段树分治，线性基，并查集#CF938G Shortest Path Queries

    题目 给出一个连通带权无向图,边有边权,要求支持 \(q\) 个操作: \(x\) \(y\) \(d\) 在原图中加入一条 \(x\) 到 \(y\) 权值为 \(b\) 的边 \(x\) \(y\ ...

  5. Windows wsl2支持systemd

    背景 很多Linux发行版都是使用systemd来管理程序进程,但是在WSL中默认是用init来管理进程的. 为了符合长久的使用习惯,且省去不必要的学习成本,就在WSL的发行版(我这里安装的是Ubun ...

  6. 【FAQ】关于分析服务错误获取所选日期前一天事件数据的解决方法

    开发者通过华为分析服务下载所需的事件数据,这些数据可以导入到开发者自有的分析系统中,用于构建自定义报告或生成受众群体的个性化分析等,从而帮助制定切实有效的营销活动.数据导出支持按照用户属性和导出事件作 ...

  7. 动态规划（六）——树形dp

    树形dp,又称树状dp,即在树上进行的dp,在设计动态规划算法时,一般就以节点从深到浅(子树从小到大)的顺序作为dp的"阶段",dp的状态表示中,第一维通常是节点编号(代表以该节点 ...

  8. redis如何在保持读写分离+高可用的架构下，还能横向扩容支撑1T+海量数据

    单机redis在海量数据面前的瓶颈. 怎么才能够突破单机瓶颈,让redis支撑海量数据? redis集群架构 redis cluster 支撑N个redis master node,每个master ...

  9. Git中 fork, clone,branch

    一.是什么 fork fork,英语翻译过来就是叉子,动词形式则是分叉,如下图,从左到右,一条直线变成多条直线 转到git仓库中,fork则可以代表分叉.克隆 出一个(仓库的)新拷贝 包含了原来的仓库 ...

  10. 力扣498(java)-对角线遍历（中等）

    题目: 给你一个大小为 m x n 的矩阵 mat ,请以对角线遍历的顺序,用一个数组返回这个矩阵中的所有元素. 输入:mat = [[1,2,3],[4,5,6],[7,8,9]]输出:[1,2,4 ...