当前位置: 主页 > 网页制作 > 其他 > 文本飞出的特效代码

文本飞出的特效代码

时间:2009-12-18来源:腾讯科技 点击:

有什么问题请到评论中发表<br>

<!-- http://www.mb5u.com/jscode -->

<!-- bbs http://www.mb5u.com/bbs-->

<!-- 完整的HTML代码 -->

我们使用时可以调整left的值和两个变量:pausebetweenmsg和glidespeed的值

 

 

<head>

<style type="text/css">

 

.glidetext{

position: relative;

/*Set initial position of your text. Make it just enough to hide the text from view:*/

left: -500px;

}

 

</style>

 

<script type="text/javascript">

 

//Sequential fly-in text script- by JavaScriptKit.com

//For this script and 400+ more, visit http://www.javascriptkit.com

//This notice must stay intact for use

 

var pausebetweenmsg=10 //customize pause in miliseconds between each message showing up (3000=3 seconds)

var glidespeed=50 //customize glide speed in pixels per frame.

 

var curobjindex=0

 

function actualstyle(el, cssproperty){

if (el.currentStyle)

return el.currentStyle[cssproperty]

else if (window.getComputedStyle){

var elstyle=window.getComputedStyle(el, "")

return elstyle.getPropertyValue(cssproperty)

}

}

 

function collectElementbyClass(){

var classname="glidetext"

glidearray=new Array()

var inc=0

var alltags=document.all? document.all : document.getElementsByTagName("*")

for (i=0; i<alltags.length; i++){

if (alltags[i].className==classname)

glidearray[inc++]=alltags[i]

}

if (glidearray.length>0)

onebyoneglide()

}

 

function onebyoneglide(){

if (curobjindex<glidearray.length)

glidetimer=setInterval("glideroutine()",50)

}

 

function glideroutine(){

if (parseInt(actualstyle(glidearray[curobjindex], "left"))<0)

glidearray[curobjindex].style.left=parseInt(actualstyle(glidearray[curobjindex], "left"))+50

else{

glidearray[curobjindex].style.left=0

curobjindex++

clearInterval(glidetimer)

setTimeout("onebyoneglide()", pausebetweenmsg)

}

}

 

if (window.addEventListener)

window.addEventListener("load", collectElementbyClass, false)

else if (window.attachEvent)

window.attachEvent("onload", collectElementbyClass)

else if (document.getElementById)

window.onload=collectElementbyClass

 

</script>

</head>

 

<body>

<div class="glidetext">This is text 1</div>

<p class="glidetext">Another text (or image) <img src="/img/200406301.jpg"></p>

<div class="glidetext">This is text 3</div>

<div class="glidetext">This is text 4</div>

</body>

 

 

 

 

 

<br><br><br>

<p><font color=red>//网站:http://www.mb5u.com</font></p>

 

 

 

站长资讯网
. TAG: 文本飞出
推荐内容最近更新人气排行
关于我们 | 友情链接 | 网址推荐 | 常用资讯 | 网站地图 | RSS | 留言