文字滚动效果

angelyu0 2009-12-03 03:04:08

怎样做一个几排文字上下滚动，但是是首尾相接的效果。
因为用MARQUEE 标签做出来的，原始内容滚动完毕会有很大一片空白。

...全文

164 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

cntmi 2009-12-04

打赏
举报

[Quote=引用 4 楼 zhangshaolongjj 的回复:]
3楼的你好，能解释下
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
里面的this吗？我对这个还是理解不好，谢谢了！
[/Quote]

这个this也就是指的函数本身：
function() {
this.initialize.apply(this, arguments);
}

zhangshaolongjj 2009-12-04

打赏
举报

3楼的你好，能解释下
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
里面的this吗？我对这个还是理解不好，谢谢了！

cntmi 2009-12-04

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title></title>

</head>

<body>

<script type="text/javascript">

var $ = function (id) {

    return "string" == typeof id ? document.getElementById(id) : id;

};



var Class = {

  create: function() {

    return function() {

      this.initialize.apply(this, arguments);

    }

  }

}



Object.extend = function(destination, source) {

    for (var property in source) {

        destination[property] = source[property];

    }

    return destination;

}



function addEventHandler(oTarget, sEventType, fnHandler) {

    if (oTarget.addEventListener) {

        oTarget.addEventListener(sEventType, fnHandler, false);

    } else if (oTarget.attachEvent) {

        oTarget.attachEvent("on" + sEventType, fnHandler);

    } else {

        oTarget["on" + sEventType] = fnHandler;

    }

};





var Scroller = Class.create();

Scroller.prototype = {

  initialize: function(idScroller, idScrollMid, options) {

    var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);

    

    this.heightScroller = oScroller.offsetHeight;

    this.heightList = oScrollMid.offsetHeight;

    

    if(this.heightList <= this.heightScroller) return;

    

    oScroller.style.overflow = "hidden";

    oScrollMid.parentNode.appendChild(oScrollMid.cloneNode(true));

    

    this.oScroller = oScroller;    

    this.timer = null;

    

    this.SetOptions(options);

    

    this.side = 1;//1是上 -1是下

    switch (this.options.Side) {

        case "down" :

            this.side = -1;

            break;

        case "up" :

        default :

            this.side = 1;

    }

    

    addEventHandler(oScroller , "mouseover", function() { oScroll.Stop(); });

    addEventHandler(oScroller , "mouseout", function() { oScroll.Start(); });

    

    if(this.options.PauseStep <= 0 || this.options.PauseHeight <= 0) 

		this.options.PauseStep = this.options.PauseHeight = 0;

    this.Pause = 0;

    

    this.Start();

  },

  //设置默认属性

  SetOptions: function(options) {

    this.options = {//默认值

      Step:            1,//每次变化的px量

      Time:            20,//速度(越大越慢)

      Side:            "up",//滚动方向:"up"是上，"down"是下

      PauseHeight:    0,//隔多高停一次

      PauseStep:    1000//停顿时间(PauseHeight大于0该参数才有效)

    };

    Object.extend(this.options, options || {});

  },

  //滚动

  Scroll: function() {

    var iScroll = this.oScroller.scrollTop, iHeight = this.heightList, time = this.options.Time, oScroll = this, iStep = this.options.Step * this.side;

    

    if(this.side > 0){

        if(iScroll >= (iHeight * 2 - this.heightScroller)){ iScroll -= iHeight; }

    } else {

        if(iScroll <= 0){ iScroll += iHeight; }

    }

    

    if(this.options.PauseHeight > 0){

        if(this.Pause >= this.options.PauseHeight){

            time = this.options.PauseStep;

            this.Pause = 0;

        } else {

            this.Pause += Math.abs(iStep);

            this.oScroller.scrollTop = iScroll + iStep;

        }

    } else { this.oScroller.scrollTop = iScroll + iStep; }

    

    this.timer = window.setTimeout(function(){ oScroll.Scroll(); }, time);

  },

  //开始

  Start: function() {

    this.Scroll();

  },

  //停止

  Stop: function() {

    clearTimeout(this.timer);

  }

};



window.onload = function(){

    new Scroller("idScroller", "idScrollMid",{ PauseHeight:25 });

}

</script>

<style>

#idScroller *{margin:0px; padding:0px;}

#idScroller{line-height:25px;width:500px; height:50px; overflow:hidden; border:1px solid #000000;}

#idScroller ul{width:100%}

#idScroller li{width:50%;  float:left; overflow:hidden; list-style:none;}

</style>

<div id="idScroller">

  <div id="idScrollMid">

    <ul>

      <li>111111111111111111111</li>

      <li>211111111111111111111</li>

      <li>311111111111111111111</li>

      <li>411111111111111111111</li>

      <li>511111111111111111111</li>

      <li>611111111111111111111</li>

    </ul>

    

  </div>

</div>

</body>

</html>

zhangshaolongjj 2009-12-04

打赏
举报

哦，多谢，

paomo18 2009-12-03

打赏
举报

这又一个无缝隙连续滚动代码效果：http://www.abaonet.com/jsCode/page/200910/2161.html

这里还有一个通用不间断滚动JS封装类，里面可以下载，挺全面的，有图片有文字，各种样式的滚动都有：
http://www.abaonet.com/demo/codeR/d1816/MSClass.html