前几天要实现一个滚动字幕,先用Marquee标签控制元素的滚动发现到每滚完一幕,就会出现一次空白,不能满足需求,上网找了下没有其他控件可以用,就用js实现了个可以连续滚动的字幕。滚动速度,时间间隔,滚动去高度等都可以方便的配置,内容可以从数据库中读取来填充。
首先显示区的高度是小于内容的高度,不然要滚动就没有意义了(废话) 为了连续滚动不间断,原始的内容是不够的,所以初始化滚动方法的时候克隆了内接在原始内容下面,同时设置了超出现实区部分的内容隐藏,这样滚动的一屏内容的时候就不会出现空白,再在克隆内容显示完之前重新设置显示内容的高度,又从头开始显示,如此循环实现连续滚动,再通过时间控制函数来来控制滚动效果等,这个功能就是先了,具体细节代码中有写注释。
参考:http://www.mingblog.com/article-1679.html
代码:
<style type="text/css">
* {font-size:12px;font-family:Verdana,Tahoma;padding:0;margin:0;}
#scrollStyle{background: #F9F9F9;border: 1px solid #E0E0E0;width:300px;}
</style>
<div id="scrollStyle"><!-- 用来控制下样式,可以去掉 -->
<div id="andyscroll">
<div id="scrollmessage">
<ul>
<li><a href="#">测试一些内容一些内容</a>-1</li>
<li><a href="#">测试一些内容一些内容</a>-2</li>
<li><a href="#">测试一些内容一些内容</a>-3</li>
<li><a href="#">测试一些内容一些内容</a>-4</li>
<li><a href="#">测试一些内容一些内容</a>-5</li>
<li><a href="#">测试一些内容一些内容</a>-6</li>
<li><a href="#">测试一些内容一些内容</a>-7</li>
<li><a href="#">测试一些内容一些内容</a>-8</li>
<li><a href="#">测试一些内容一些内容</a>-9</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TIME_INTERVAL = 1000;// 滚动停止 时间间隔(毫秒)
var SCROLL_INTERVAL = 40;// 移动一个像素的时间间隔(毫秒)
var SCROLL_DISTANCE = 16;// 每次滚动距离(像素)
var SCROLL_HEIGHT = 32// 显示区高度,最好是SCROLL_DISTANCE的整数倍,不至于滚出半行
var stopscroll = false;// 用于鼠事件,判断是否停止滚动
var intervalObject; // 时间停止对象
var andyscrollHeght = 0;
var scrollElem = document.getElementById("andyscroll");
init_srolltext();
/**
* 滚动区初始化
*/
function init_srolltext(){
try{
with(scrollElem){
style.overflow = 'hidden';// 设置内容超过滚动区隐藏
noWrap = true;
}
scrollElem.style.height = SCROLL_HEIGHT;// 设置滚动区高度
scrollElem.onmouseover = new Function('stopscroll = true');// 设置鼠标事件
scrollElem.onmouseout = new Function('stopscroll = false');// 设置鼠标事件
andyscrollHeght = scrollElem.scrollHeight;
var leftElem = document.getElementById("scrollmessage");
scrollElem.appendChild(leftElem.cloneNode(true));// 拷贝一个内容接在原始内容上,用于无缝滚动
scrollElem.scrollTop = 0;// 初始化开始滚动的高度
begain_srolltext();//开始滚动
}catch(e){}
}
/**
* 开始滚动
*/
function begain_srolltext(){
intervalObject = setInterval('scrollUp()', SCROLL_INTERVAL);
}
/**
* 向上滚动操作
*/
function scrollUp(){
if(stopscroll)return;// 如果鼠标在上面,不滚动
scrollElem.scrollTop += 1;
/**
* 如果滚动区的高度和当前的顶端相等,则重置滚动内容的高度
* 实现无缝的滚动
*/
if(scrollElem.scrollTop == andyscrollHeght){
scrollElem.scrollTop = 0;
}
/**
* 滚动一段距离SCROLL_DISTANCE后停止一段时间TIME_INTERVAL重新开始滚动
*/
if((scrollElem.scrollTop)%SCROLL_DISTANCE == 0){
clearInterval(intervalObject);
setTimeout("begain_srolltext()",TIME_INTERVAL);
}
}
//-->
</script>