TRy HArD aT aNY TimE

2008-04-18

JavaScript 模拟marquee效果

关键字: javascript, marquee, firefox, ie, 停止、渐变

这段代码主要实现了一个具有渐变滚动效果的marquee，当其获得焦点的时候会出现停顿效果
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>