静态网页制作 滚动条
一.效果图
嗯…实际动画效果就是它在一个字一个字地向前滚。
二.HTML结构
HTML它…没有什么好说的,只是一段文本。还是讲讲js吧。
这里用到了一个方法setInterval(),可以周期性地调用函数。我们可以通过函数来改变显示的文本内容,然后再通过周期性调用该函数来达到文本内容周期性变化的效果。
而改变文本内容的函数就是获得p中文本,将文本内容的第一个字符调到最后一位去,组成新的文本,再传回p,几次调用下来就会产生滚动的效果。
三.具体实现
HTML
<body>
<div>
<p id="roll">WARNING!WARNING!WARNING!WARNING!WARNING!WARNING!WARNING!</p>
</div>
<script src="l.js"></script>
</body>
CSS
div{
width:100%;
margin:0;
padding:0;
background-color: #312a28;
color: #ff5839;
text-align: center;
font-size: 2em;
font-weight: bold;
overflow: hidden;
}
#roll{
padding-top:10px;
padding-left: 0;
}
JavaScript
function func(){
var tag=document.getElementById("roll");
var content=tag.innerText;
var f=content.charAt(0);
var l=content.substring(1,content.length);
var new_content=l+f;
tag.innerText=new_content;
}
setInterval("func()",500);
就是这样吼,有什么错误请多指正,大家一起交流交流。