VueJS和Javascript实现文字上下滚动效果
一提到文字上下滚动，我们就会想到用不同的程序去实现，而且页面中有文字滚动会增加这个网页的互动和可信度。
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实现文字上下滚动效果的更多相关文章
- js实现文字上下滚动效果
大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- DIV+javascript实现首尾相连循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台
www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台
- 使用javascript开发的视差滚动效果的云彩
在线演示 jquery.parallax.js是一款能够帮助你快速开发视差效果的jQuery插件,在这里我们使用它来开发一款漂亮的云朵视差效果. 主要代码: Javascript ........ 阅 ...
- js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
- jquery实现文字上下滚动效果
文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...
- jquery实现多行文字图片滚动效果
今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...
- jquery文字纵向滚动效果（带间隔停留）
<script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotati ...
- TextView实现文字水平滚动效果
有时候我们使用TextView显示文本,只想把所有内容用一行显示出来,但是一行又显示不完,就需要让文本实现水平滚动的效果. 具体实现方法如下: 1,实现自定义TextView并实现isFocused( ...
随机推荐
- 【已解决】aconda3 创建和切换jupyter Kernel（安装好了tensorflow在jupyter中无法使用）
如下图:在这里更换python环境内核(如果你把tensorflow安装在了一个新建的虚拟环境) 1. 创建新的环境(或者是直接激活进入已经安装了tensorflow的环境) conda create ...
- Scala 不可变数组Array
1 package chapter07 2 3 object Test01_ImmutableArray { 4 def main(args: Array[String]): Unit = { 5 / ...
- #搜索#AT2368 [AGC013B] Hamiltonish Path
题目 求一条简单路径使得路径端点不能再被延伸 分析 一开始想到可能和度数有关,其实没必要, 随便以一个点作为路径中的点深搜两次即可 代码 #include <cstdio> #includ ...
- OpenHarmony—应用间HSP开发指导
应用间HSP用于不同应用间的代码.资源共享. 应用间HSP的宿主应用是一种特殊状态的应用,只能由一个HSP组成,不会独立运行在设备上,而是被普通应用模块的依赖项引用.当普通应用运行时,通过动态调用的 ...
- Ohos-MPChart——支持多种图表绘制的组件
简介 Ohos-MPChart是OpenAtom OpenHarmony(简称"OpenHarmony")系统显示各种图表视图的三方组件,用于声明式应用开发,提供了多种多样的图表视 ...
- Java 数学运算与条件语句全解析
Java Math Java 的 Math 类 拥有许多方法,允许您在数字上执行数学任务. 常用方法: Math.max(x, y): 找到 x 和 y 的最大值 Math.min(x, y): 找到 ...
- 上新啦KIT
HMS Core上新啦!分析服务区服分析全新上线:机器学习服务OCR新增手写识别服务:3D建模续扫能力更新:视频编辑服务支持自定义上传素材--更多#HMS Core#能力可点击网页链接了解. 了解更多 ...
- centos部署Django二：项目上传及测试
1. 上传项目 用 ftp 或者 sftp 上传项目到服务器. *:如果上传时,报各种错误,可以考虑下是不是服务器中文件夹权限的问题.如果是权限的问题,可以使用命令修改文件夹权限后在上传:chmod ...
- Django Admin：自动选择当前用户
--转载自:林肯李 该文章写的很好,特转载留待后期备用 背景 在开发 CMS 时,经常需要标记谁创建了记录.Django 为我们提供了一个很好的管理界面.但是当我们只使用默认值时,用户需要自己选择他们 ...
- IaC 管理新思路：Walrus 和 Terraform 的差异化探索
Terraform 的社区版本及商业化版本,让其成为在基础设施即代码(IaC)领域中可靠的部署和管理平台.尽管目前 Terraform Cloud/Enterprise 仍然是最为广泛采用的 IaC ...