html5实现滚动文字



<div class="custom-notice">
   <i class="icon-notice"></i>
   <marquee class="noticeText ng-binding" direction="left" behavior="alternate" scrollamount="100" scrolldelay="1000" loop="5" width="100%" onmouseover="this.stop();" onmouseout="this.start();"  style="width: 100%;">充值公告:首充100送1元</marquee>
</div>

1.滚动方向属性 direction
该属性的滚动方向可以设置四个值:up(文字向上)、down(文字向下)、left(文字向左)、right(文字向右)。
2.滚动方式属性 behavior
该属性的取值有三个值:scroll(循环滚动,默认效果)、slide(只滚动一次就停止)、alternate(来回交替进行滚动)
3.滚动速度属性 scrollamount
该属性能调整文字滚动的速度,滚动文字的速度实际上是通过设置滚动文字每次移动的长度来实现的,以像素为单位。值只写数字,不带px单位,若带了单位则设置无效。
4.滚动延迟属性 scrolldelay
该属性用来设置滚动文字滚动的时间间隔(滚动两步之间的时间间隔)。
scrolldelay的时间间隔单位是毫秒,取值只写数字
5.滚动循环属性 loop
设置滚动文字后,默认会无限循环下去,若想控制循环的次数,可设置此属性。
6.滚动范围属性 width&height
若想控制文字滚动的范围,则可起用这二属性,以像素为单位,不写px单位。默认情况下left和right滚动的width和浏览器窗口同宽,搞定和文字高度同高。up和down时height为浏览器窗口高度的三分之一。
7.滚动背景颜色属性 bgcolor
此属性为滚动区域设置背景色(取值为十六进制颜色码和英文)。
8.滚动空间属性 hspace&vspace
hsapce属性可以设置滚动范围的水平位置,vspace用来设置滚动范围的垂直位置。单位均为像素,写值时不写单位px。
时间: 2024-10-13 22:24:40

html5实现滚动文字的相关文章

SharePoint 2010/SharePoint 2013 Custom Action: 基于Site Collection 滚动文字的通知.

应用场景: 有时候我们的站点需要在每个页面实现滚动文字的通知,怎么在不修改Master Page的情况下实现这个功能?我们可以使用Javascript 和 Custom Action 来实现. 创建一个Custom Action.主要使用到 Location = 'ScriptLink' 属性, 该属性可以动态的加载JavaScript 文件链接和代码块到模板页.代码如下: <Elements xmlns="http://schemas.microsoft.com/sharepoint/&

HTML5绘图之文字旋转

HTML5绘图之文字旋转 在GDI/GDI+中文字旋转是一件比较容易的事情,HTML5的Canvas中的旋转与GDI/GDI+中的旋转稍微有点差异,先看一个图: 文字旋转的示例代码 ctx.beginPath(); ctx.fillStyle = "#000000"; ctx.font = "52pt Calibri"; ctx.textAlign = "center"; ctx.fillText(this.end, endX, endY); c

【在网页中添加滚动文字】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <tit

【JavaScript】原生态兼容IE6可调可控的滚动文字

虽然HTML里面本身就有marquee标签,用来设置滚动文字,但是在<[HTML]比较冷门标签与属性>(点击打开链接)我已经说过,这个标签到了IE8就开始不支持,在IE6中可以设置的东西也很少,所以这东西还是用javascript来写为好.这个小组件也是比较常见的,但是网上的代码质量还是为了很多无关紧要的小特效而增加了许多无谓的代码.其实这东西,你只要弄得能自己向右向左滚,到了屏幕边缘自动返回就行了,为什么要为了一些淡入淡出的华而不实的东西,而写一大摞代码了.下面介绍一个自己写的利用paddi

HTML滚动文字代码 marquee标签

    <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" ><div align="left" ><br /></div ><center ><font face="黑体" color="#008000" size=&q

lua滚动文字效果

基本的思想都是创建一个clippingNode,将要截取的节点添加到clippingNode中,节点加上action即可. 下面是左右滚动的代码,如果是上下滚动,更简单了,只需修改Y坐标即可,都不用动态去计算时间. -- 获取宽字符的宽度 function wideWordWidth(fontName, fontSize) local key = generateKey(fontName, fontSize) if mWideWordWidth[key] == nil then local st

html5 横向滚动,无滚动条(transform:translate)

html5 横向滚动,用到了 touchstart.touchmove.touchend 控制修改transform:translate属性;[手机端或者浏览器模拟手机模式才有效果] [转载请注明出处] 回头准备封装成插件都放到 github上  https://github.com/wt9213 html: <div class="tab" id="tab"> <div class="scroll-tab" id="

Html滚动文字

<marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" > <div align="left" ><br /> </div > <center ><font face="黑体" color="#008000" size=&qu

Silverlight实现滚动文字

主要是用到DoubleAnimation 标签: <Canvas x:Name="c1" Margin="2,25,2,2"> <Canvas.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded" > <BeginStoryboard> <Storyboard x:Name="animation" RepeatBehavio