这段代码主要实现了一个具有渐变滚动效果的marquee,当其获得焦点的时候会出现停顿效果
javascript代码如下:
HTML页面代码:
CSS简单样式:
调用:
javascript代码如下:
/**
*@author anwx <a href="mailto:luckyanzi@china.com.cn">An Weixiao</a>
*@version $Id$
*/
var m_iInterval;
var m_Height;
var iScroll=0;
var SnowMarquee = function(){}
SnowMarquee.prototype = {
//其实其应该具有 timeout count objects
startRotate:function(){ //startRotate
if( !this.count ){ //数据的总量
this.count = 0;
}
if( !this.cursor ){ //当前元素
this.cursor = 0;
}
if( !this.objects ){
alert("这个部分的数据容器信息出现了错误!"); //{key:'', value:''}
return;
}
var self_ = this;
m_iInterval = setInterval(function(){self_.ontimer(self_);}, 10);
var base = document.getElementById("marquee_base");
m_Height = base.offsetHeight;
var divi = parseInt(m_Height/5);
m_Height = divi*5;
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
var td3 = document.getElementById("td3");
td1.height = m_Height-5;
td2.height = m_Height-5;
td3.height = m_Height-5;
this.count = this.objects.length-1;
this.setContents();
},
setContents:function(){
var ilink = document.getElementById("marquee_contents");
var nextObj = this.objects[this.cursor];
for ( var key in nextObj ) { //TODO
ilink[key] = nextObj[key];
}
},
ontimer:function(o){
var self_ = o;
var base = document.getElementById("marquee_base");
iScroll += 1;
if (iScroll>(m_Height*2)) {
iScroll=0;
self_.cursor++;
if (self_.cursor > self_.count)
self_.cursor = 0;
self_.setContents();
}
if (iScroll==m_Height) {
self_.pause();
m_iInterval = setTimeout(function(){self_.resume(self_);}, 4000);
}
base.scrollTop=iScroll;
},
pause:function(){
clearInterval(m_iInterval);
},
resume:function(o){
var self_ = o;
m_iInterval = setInterval(function(){self_.ontimer(self_)}, 10);
}
}
HTML页面代码:
<div id="marquee_base" class="news" onmouseover="mar__.pause()" onmouseout="mar__.resume(mar__)">
<table class="areas_">
<tr><td id="td1" style=""></td></tr>
<tr><td id = "td2" valign="middle" align="center"><div id="marquee_contents"></div></td></tr>
<tr><td id="td3"></td></tr>
</table>
</div>
</center>
</div>
CSS简单样式:
#marquee_base {
overflow-y:hidden;
width: 200px;
height: 20px;
border: 2px dotted #000099;
margin: auto;
padding: 0 10px 0 10px;
font-size: .9em;
font-family: Verdana, Arial, sans-serif;
}
.areas_ {
background-color: #DDDDDD;
color: inherit;
line-height:22px;
}
调用:
<script language="javascript" type="text/javascript">
var mar__ = new SnowMarquee();
mar__.objects = [
{'innerHTML':'data1'},{'innerHTML':'data2'},{'innerHTML':'data3'}
]
mar__.startRotate();
</script>