跑马灯

vue跑马灯效果

喜你入骨 提交于 2019-12-03 10:26:10
一、分析 1. 给 【跑起来】 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可; 3. 为了实现点击下按钮,自动截取的功能,需要把 2 步骤中的代码,放到一个定时器中去; 二、实例 <body> <!-- 2. 创建一个要控制的区域 --> <div id="app"> <input type="button" value="跑起来" @click="lang"> <input type="button" value="静止" @click="stop"> <h4>{{ msg }}</h4> </div> <script> // 注意:在 VM实例中,如果想要获取 data 上的数据,或者 想要调用 methods 中的 方法,必须通过 this.数据属性名 或 this.方法名 来进行访问,这里的this,就表示 我们 new 出来的 VM 实例对象 var vm = new Vue({ el: '#app', data: { msg: '中华民族万岁,啦啦啦啦~~!', intervalId: null // 在data上定义 定时器Id }, methods: { lang() { //

stm32寄存器版——跑马灯

馋奶兔 提交于 2019-12-03 07:24:17
一。首先头文件LED定义 1 # ifndef __Led_H 2 #define __Led_H 3 #include "sys.h" 4 #define LED0 PBout(5) // 5 #define LED1 PEout(5) 6 void LED_Init(void); 7 #endif 二 LED.c 3.GPIO_CRL端口配置低寄存器 GPIO_CRH端口配置高寄存器 GPIO_IDR端口输入寄存器 GPIO_ODR端口输出寄存器 GPIO_BSRR端口位设置/清除寄存器 GPIO-BRR端口位清除寄存器 GPIO_LCKR端口配置锁存寄存器 每一组CNFy[1:0]和MODEx[1:0]为一组; #include LED.h void LED_Init() { RCC->APB2ENR|=1<<3; //使能PORTB RCC->APB2ENR|=1<<6; //使能PORTE GPIOB->CRL&=0XFF0FFFFF; //清0 GPIOB->CRL|=0X00300000; //PB.5推挽输出 3->0011 GPIOB->ODR|=1<<5; //.PBS输出高 GPIOE->CRL&=0XFF0FFFFF; //清0 GPIOE->CRL|=0X00300000; //PE.5推挽输出 GPIOE->ODR|=1<<5; //.PES输出高 }

JS 跑马灯效果实现

匿名 (未验证) 提交于 2019-12-03 00:22:01
实现跑马灯效果的JS很多,但是很多不好用,下面介绍一个比较好用的。 好用之处在于: 1 支持一个页面多个跑马灯效果 2.支持跑马灯内容的异步加载 关键的实现代码,如果看不懂,可以跑这个列子 <body> <ul id="RunTopic"> <li>文字1</li> <li>文字2</li> <li>文字3</li> <li>文字4</li> <li>文字5</li> </ul> <br> <input type="button" onclick="test();" value="test"> <script type="text/javascript"> function test() { $("#RunTopic").find("li:first").appendTo($("#RunTopic")); } </script> </body> 另外,也可以使用HTML的marquee 标签,我刚测试而来下,chrome,IE8,火狐都支持! 如: ######################################################################################## JS代码: HTML代码: 文章来源: JS 跑马灯效果实现

STM32跑马灯实验

匿名 (未验证) 提交于 2019-12-03 00:22:01
库函数版本: 1、硬件连接。 查看原理图,选择io口。选择GPIO输出方式:推挽输出(可以真正的输出高低电平) 2、函数编写。 ①使能IO口时钟。不同的IO组,调用的时钟使能函数不一样 ②初始化IO口模式。调用函数GPIO―Init() ③操作IO口,输出高低电平。 文章来源: STM32跑马灯实验

marquee 跑马灯

匿名 (未验证) 提交于 2019-12-03 00:18:01
js实现跑马灯 ------------------------------------------html----------------------------------------------- <p id= "scrollobj" style= "white-space:nowrap;overflow:hidden;width:300px;margin: auto;" onmouseover= "jsStop()" onmouseout= "jsStart()" ><span style= "padding-left:150px" >Hello World!</span></p> -----------------------------------------js代码---------------------------------------------- let scrollobj = document .getElementById( 'scrollobj' ); let scroll = (obj) => { let tmp = (obj.scrollLeft)++; obj.scrollLeft == tmp ? obj.innerHTML += obj. innerHTML : '' ; obj.scrollLeft >= obj.firstChild

marquee标签实现跑马灯效果--无缝滚动

戏子无情 提交于 2019-12-02 15:49:31
今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果。但无意中发现了一个html标签——<marquee></marquee>可以实现多种滚动效果,无需js控制。使用marquee标签不仅可以滚动文字,也可以滚动图片,表格等,而且使用起来方便快捷,真的为我节省了不少时间。 marquee标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果,该标签是个容器标签。 一、marquee标签的几个重要属性: 1.direction:滚动方向(包括4个值:up、down、left、right) 说明:up:从下向上滚动;down:从上向下滚动;left:从右向左滚动;right:从左向右滚动。 语法:<marquee direction="滚动方向">...</marquee> 2.behavior:滚动方式(包括3个值:scroll、slide、alternate) 说明:scroll:循环滚动,默认效果;slide:只滚动一次就停止;alternate:来回交替进行滚动。 语法:<marquee behavior="滚动方式">...</marquee> 3.scrollamount:滚动速度

html跑马灯/走马灯效果

ぃ、小莉子 提交于 2019-12-01 07:56:44
实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句,它的效果如下所示: 滚动的文字   适当的运用<marquee>标签的参数,可以表现出不同的效果,请看下面的几个例子:   1、左右弹来弹去的跑马灯 弹来弹去跑马灯!   实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动,direction= left表示运动方向向左。marquee的宽度可以使用绝对象素值,例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在 Netscape下是看不到的。   源码粘贴框: <marquee width=400 behavior=alternate direction=left align=middle>弹来弹去跑马灯!</marquee>   2、跑的很快的跑马灯 跑的很快跑马灯!    只要在<marquee>标签后面加上“scrollamount=15”即可,修改=后边的数字参数即可限制文字移动的速度。   3、带有超级链接的跑马灯   实现的方法很简单,把整个<marquee></marquee>语句包含在超链接中就行,你看看下面的代码就清楚了。当然你也可以把包含在<marquee><

marquee标签实现跑马灯效果--无缝滚动

泄露秘密 提交于 2019-11-29 15:00:14
今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果。但无意中发现了一个html标签——<marquee></marquee>可以实现多种滚动效果,无需js控制。使用marquee标签不仅可以滚动文字,也可以滚动图片,表格等,而且使用起来方便快捷,真的为我节省了不少时间。 marquee标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果,该标签是个容器标签。 一、marquee标签的几个重要属性: 1. direction :滚动方向(包括4个值:up、down、left、right) 说明:up:从下向上滚动;down:从上向下滚动;left:从右向左滚动;right:从左向右滚动。 语法:<marquee direction="滚动方向">...</marquee> 2. behavior :滚动方式(包括3个值:scroll、slide、alternate) 说明:scroll:循环滚动,默认效果;slide:只滚动一次就停止;alternate:来回交替进行滚动。 语法:<marquee behavior="滚动方式">...</marquee> 3. scrollamount :滚动速度

Vue教程02(跑马灯效果案例)

核能气质少年 提交于 2019-11-28 11:20:32
原文: http://blog.gqylpy.com/gqy/423 置顶:来自一名75后老程序员的武林秘籍——必读 (博主推荐) 来,先呈上武林秘籍链接: http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我会画原理图,会画 PCB,会模拟,会数字!玩过 PLC,玩过单片机,会用汇编,会用 C!玩过 ARM,比如 PLC,STM32,和时下正在起飞的 NXP RT1052!搞过 DSP,比如 TMS320F28335!搞过 FPGA,不管 Xilinx 还是 Altera,也不管是 Verilog 还是 VHDL,或者直接画数字电路图!我懂嵌入式系统,比如 uCOS 和 Linux!我懂开源的硬件,比如 Arduino 和树莓派!我也搞软件,学了一堆上位机的语言C#,JAVA,Python,Kotlin,Swift!会写爬虫工具,又自学写APP,不管Android 还是 IOS! 可是这一切有什么用呢?土鸡瓦狗!不值一提!干技术的永远就是最苦逼的那个人! 我相信看到这里的你,应该是个 IT

上滑跑马灯

蹲街弑〆低调 提交于 2019-11-28 08:35:45
前言 产品说,我们做一个转盘活动吧,需要轮播中奖信息。 当然这需求完全没有问题。 产品说,你听我说完。 是从下往上轮播 如何数据没有更新,就反复轮播。 如果数据有更新,要无缝更新。 进入时间1s,暂停1S,出去时间1s. 没问题吧。 额, 等等,没多大问题。 那个谁,这个任务教你啦。 方案 然后,我的同事开始搜罗实现方案,很多都是匀速走的。 同事甚至和产品讨论要不要换成跑马灯,嘻嘻, 开玩笑。 说个笑话,csdn上有不少的这样代码,但是下载要积分,我可以说,日了*狗么!。 一个下午天气晴,有凉风,心情还好。 于是花了一点时间思考了一种方案。 关于移动端动画,无非是纯js控制,js Animation API(兼容不理想), css动画,canvas, webgl以及杂交方案。 关于本需求,前两种应该比较适合,成本低,容易实现。 纯js实现控制比较传统的方案,要启用定时器setTimeout/setInterval/requestAnimation等等,我很烦这。 采用css3 + js杂交方案,有戏靠谱。 既然有三个阶段,那么我就把你拆成三段动画, 随你去配置,随你去high。 当然你也可以用一段动画,通过设置来控制距离。 整体的思路 我把每个需要滚动的每个元素独立起来,每个元素有三段动画, in , pause , out. 怎么衔接, 通过animationend事件。