1. IT分享知识网首页

各种文字滚动效果代码[亲测有效]

老牧童 • • 未分类 • 阅读 160

各种文字滚动效果代码[亲测有效]

几排文字向上滚动 
 

 
插入你要输入的文字
 
在输入文字时，如要它一行一行的出还要在每段文字的后面加上
.
 
一些其他代码：

大家好，欢迎来到IT知识分享网。

几排文字向上滚动  

 

<MARQUEE direction=up οnmοuseοut=start(); οnmοuseοver=stop(); scrollAmount=1 scrollDelay=15 width=160 height=”100px”>

 

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

 

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

 

一些其他代码：

 

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

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

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

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

<marquee behavior=alternate>来回走！</marquee><p> 

<marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee><p> 

<marquee loop=3 width=50% behavior=slide>只走 3 趟！</marquee><p> 

<marquee loop=3 width=50% behavior=alternate>只走 3 趟！</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 scrollamount=1  scrolldelay=3 valign=middle behavior=”scroll”>      

 

<img border=”0″ src=”  http://要滚动的图片地址1″> 

 

<img border=”0″ src=”  http://要滚动的图片地址2″> 

 

</marquee>

 

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

 

<marquee onMouseOver=”this.stop()” onMouseOut=”this.start()” align=center direction=up scrollamount=1  scrolldelay=3 valign=middle behavior=”scroll”>

 

<img border=”0″ src=”  http://要滚动的图片地址1″> 

 

<img border=”0″ src=”  http://要滚动的图片地址2″> 

 

</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>

<style type=”text/css”>

<!–

.test {

font-size: 12px;

line-height: normal;

text-decoration: none;

}

–>

</style>

<head>

<body>

<div id=”layer1″ style=”overflow-y:hidden;width:50;”>

<div id=”layer2″>

<table width=”130″ height=”70″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ class=”test”>

<tr>

<td width=”150″ height=”70″ valign=”top” bgcolor=”#FFFFFF” class=”nav1style style46″>

<center>第(1)条</center>

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

<center>第(2)条</center>

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

</td>

</tr>

</table>

</div>

<div id=”layer3″></div>

<script language=”javascript”>

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鼠标经过滚动停止

<marquee direction=”left” scrollamount=”10″ onMouseOver=”stop()” onMouseOut=”start()”> 

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

</marquee>

 

 

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

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/26444.html

赞 (0)
老牧童老牧童
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信