各种文字滚动效果代码

几排文字向上滚动

插入你要输入的文字</MARQUEE>

在输入文字时，如要它一行一行的出还要在每段文字的后面加上<br> .

一些其他代码：

<marquee direction=left>从右向左移！</marquee><p>

<marquee direction=right>从左向右移！</marquee><p>

<marquee behavior=scroll>一圈一圈绕着走！</marquee><p>

<marquee behavior=slide>只走一次就歇了！</marquee><p>

<marquee scrollamount=20>走得好快哟！</marquee>

文字滚动代码 (从右向左滚动)

<marquee width="157" height="21">要滚动的文字</marquee>

文字滚动代码 (从下往上滚动)

<marquee bgcolor=#ffffff class=p4 direction=up height=60 scrollamount=1 scrolldelay=50 style="COLOR: #000000; class: " width=157 text-align: left? border="0" ;>要滚动的文字</marquee>

图片滚动代码 (从右向左滚动)

</marquee>

图片滚动代码 (从下往上滚动)

</marquee>

http://blog.hjenglish.com/vivian_liu/articles/443469.html

Marquee属性&Marquee无间断滚动&Marquee鼠标经过滚动停止

Marquee属性

<MARQUEE ALIGN="…"

　　behavior="…"

　　BGCOLOR="…"

　　DIRECTION="…"

　　HEIGHT="…"

　　WIDTH="…"

　　HSPACE="…"

　　VSPACE="…"

　　LOOP="…"

　　SCROLLAMOUNT="…"

　　SCROLLDELAY="…"

>…</MARQUEE>

align: 对齐方式 LEFT，CENTER，RIGHT，TOP，BOTTOM (不用多说了)

behavior: 用于设定滚动的方式，主要由三种方式：

behavior="scroll": 表示由一端滚动到另一端；

behavior="slide": 表示由一端快速滑动到另一端，且不再重复；

behavior="alternate" : 默认值--表示在两端之间来回滚动。

direction: left(默认值) 左; right 右;up 上;down 下;

bgcolor: 背景颜色

height: 高度

weight: 宽度

Hspace/vspace: 分别用于设定滚动字幕的左右边框和上下边框的宽度。作用大概和css中的margin差不多

scrollamount: 用于设定每个连续滚动文本后面的间隔，该间隔用像素表示，以上是官方说法,其实就是滚动的速度，值不能太大,要不从视觉角度来说,是没反应的.值越大速度越快，反之越慢。

scrolldelay: 延迟时间

loop: 这个属性大家也很熟悉，循环次数；loop=-1的时候一直重复循环（默认值）

好，现在我们再来接触一些Dcode的一些知识。

首先是两个鼠标事件

onmouseover: 鼠标触发事件---当用户将鼠标指针移动到对象内时触发

onmouseout: 鼠标滑出事件---当用户将鼠标指针移出对象边界时触发

这里要用到的是 this.start() 与this.stop()

FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体; mso-ascii-font-family: Verdana; mso-hansi-font-family: Verdana">意思就是鼠标移到marquee的内容上的时候停止循环，鼠标移开marquee 又开始移动。

继续

innercode: 设置或获取位于对象起始和结束标签内的 code

innerText: 设置或获取位于对象起始和结束标签内的文本

scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。PS:大家不要想当然的以为有scrollRigh和scrollDown ：）

scrollDelay: 设置或获取字幕滚动的速度，要创建垂直滚动的字幕，请将其 scrollLeft 属性设定为0，要创建水平滚动的字幕，请将其 scrollTop 属性设定为 0，这将覆盖任何脚本设置

scrollHeight: 获取对象的滚动高度

scrollAmount: 设置或获取介于每个字幕绘制序列之间的文本滚动像素数

offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。

setInterval: 交互时间。它从载入后,每隔指定的时间就执行一次表达式

clearInterval: 使用 setInterval 方法取消先前开始的间隔事件。

Marquee无间断滚动

<html>

<head>

<!--

.test {

font-size: 12px;

line-height: normal;

text-decoration: none;

}

-->

</style>

<head>

<body>

<tr>

<a href="#" title="关于＜＜电气工程自动化＞＞研究生班授课的通知" class="none_underline"><font color=#ff0000>关于＜＜电气工程自动化＞＞研究生班授课的通知 2006-3-9</font></a><br><br>

<a href="#" title="关于企业管理研究生班授课的通知" class="none_underline"><font color=#ff0000>关于企业管理研究生班授课的通知 2006-3-8</font></a><br><br>

</td>

</tr>

</table>

</div>

var layerHeight = 100; // 定义滚动区域的高度.

var iFrame = 1; // 定义每帧移动的象素.

var iFrequency = 50; // 定义帧频率.

var timer; // 定义时间句柄.

if(document.getElementById("layer2").offsetHeight >= layerHeight)

document.getElementById("layer1").style.height = layerHeight;

else

document.getElementById("layer1").style.height = document.getElementById("layer2").offsetHeight;

document.getElementById("layer3").innerHTML = document.getElementById("layer2").innerHTML;

function move(){

if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight){

document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame);

}

else {

document.getElementById("layer1").scrollTop += iFrame;

}

timer = setInterval("move()",iFrequency);

document.getElementById("layer1").οnmοuseοver=function() {clearInterval(timer);}

document.getElementById("layer1").οnmοuseοut=function() {timer=setInterval("move()",iFrequency);}

</script>

</body>

</html>

Marquee鼠标经过滚动停止

<a href="#">dssfsdfsdf</a> <a href="#">dssfsdfsdf</a>

</marquee>

转载自：http://hi.baidu.com/%B7%B6%BA%EC%EB%DE/blog/item/5b5c02d3be27c1093af3cfde.html

各种文字滚动效果代码相关推荐

水平滚动选择图片 html,jquery实现图片水平滚动效果代码分享
本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果 ...
产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码: 在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如 ...
html5 文字滑动特效代码,三种网页状态栏文字滚动特效代码
网页状态栏底部滚动文字特效代码文字滚动特效代码一: >
html5滚动文字切换效果代码,js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了 ...
页面实现文字滚动效果(跑马灯)
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用ma ...
jQuery酷炫的文字动画效果代码
jquery css3文字动画特效点击切换文字动态效果 jquery文字动画特效制作淡出淡进文字轮播动画效果代码 jquery文字提示点击按钮触发文字变大消失动画效果 jquery点击按钮淡出淡进动画 ...
HTML实现公告文字滚动效果
效果图: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
html滚动效果代码,javascript 实现滚动效果代码整理
1.先写两个最常用最简洁的滚动代码代码如下: 水平滚动: 水平滚动字幕内容垂直滚动: 垂直滚动字内容 2.平稳不间断滚动 var tm=null function newsScroll() { v ...
css数字/文字滚动效果
效果: 原理利用伪类,开始的时候给本来的内容盖住,然后执行动画. 设置宽高,宽就是单个内容(比如数字中的一位数)的宽,让内容一行一个的排成列. 动画就是让这些内容一个个的往上升,造成一种滚动效果最 ...

各种文字滚动效果代码

各种文字滚动效果代码相关推荐

最新文章

热门文章