您的位置：首页 > Web前端 > JavaScript

javascript实例——文本特效篇(包含3个小例子)

2016-04-26 16:58 537 查看

1、标题跑马灯

常常能够在一些新闻网站，或者其他地方，看到文字在一个特定的区域内，来回滚动。一旦超出边界就消失了，那么这些效果是如何做到的呢，今天我们就来讲讲。

图示效果：

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8">
<title>彩色文字的顺序闪烁效果</title>
<style>
section{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 42px;
padding: 10px;
font-size: 28px;
margin: 10px;
}
span{
color:red;
}
</style>
</head>
<body>
<section>
<div>tkgeagteewevbnmkj</div>
<div>tkgeagteewevbnmkj</div>
</section>
</body>
<script language="JavaScript">

//获取两个div
var str=document.getElementsByTagName("div")[0];
var str2=document.getElementsByTagName("div")[1];

var j=0,i=0,k=0;
var color=["blue","red","yellow","#cccccc"];

//每次只改变一个字符的颜色
function changeCharColor()
{
var div=str.innerText;
var len=div.length;
if(j<len) {
str.innerHTML=div.substring(0,j)+"<span>"+div.charAt(j)+"</span>"+div.substring(j+1,len);
j++;
}
else{
j=0;
}
}

//改变一段字母的颜色，每次增加一个字母
function changeColor2(){
var div=str2.innerText;
var len=div.length;
if(i<=len) {//注意小于等于，因为substring的截取的时候，不包括第二个参数指定的位置。
str2.innerHTML="<span style='color:"+color[k]+";'>"+div.substring(0,i)+"</span>"+div.substring(i,len);
console.log(str.innerHTML);
i++;
}
else{
i=0;
k++;
}
if (k==3){k=0;}

}

//定时调用
setInterval("changeCharColor()", 100);
setInterval("changeColor2()", 150);//递归调用
</script>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航