原代码来源:YAHOO中国
演示地址:http://www.yaohaixiao.com/effects/scrollVertical.html
下载地址:scrollVertical.rar
我很久前在YAHOO上扣的代码,兼容性很好,在Windows下的主流浏览器中可以正常运行。
大家先不要急着下载代码,你随时都可以下,我们来分析下代码(代码中我已经写了很详细的注释),要之其所以然,在解读别人的代码中学习提高自己,然后可以灵活运用,这个才是我将这个效果贴出来的主要目的,代码如下:
scrollver.js
[code]
scrollVertical.prototype.scrollArea=null; // 滚动的区域
scrollVertical.prototype.scrollMsg=null; // 要滚动的内容
scrollVertical.prototype.unitHeight=0; // 单独一行滚动内容的高度(程序中通过过的要滚动行的一个节点的offsetHeight获得)
scrollVertical.prototype.msgHeight=0; // 整个滚动内容的高度
scrollVertical.prototype.copyMsg=null; // 复制滚动内容(程序中使用复制scrollMsg.innerHTML来获得的)
scrollVertical.prototype.scrollValue=0; // 滚动的值
scrollVertical.prototype.scrollHeight=0; // 滚动高度
scrollVertical.prototype.isStop=true; // 停止滚动
scrollVertical.prototype.isPause=false; // 暂停滚动
scrollVertical.prototype.scrollTimer=null; // 滚动计时器
scrollVertical.prototype.speed=2000; // (默认)滚动的时间间隔2秒
/**
* @method isMoz - 判断是否为Mozilla系列浏览器
*/
scrollVertical.prototype.isMoz = function(){
return navigator.userAgent.toLowerCase().indexOf('gecko') > 0;
};
/**
* @method play - 滚动信息的处理方法(函数)
* @param {Object} o - 滚动类
*/
scrollVertical.prototype.play = function(o){
var s_msg = o.scrollMsg;
var c_msg = o.copyMsg;
var s_area = o.scrollArea;
var msg_h = o.msgHeight;
var anim = function(){
// 如果已经开始计时(间隔时间执行向上滚动),
// 就停止它(以免无限制执行,耗系统资源)。
if (o.scrollTimer) {
clearTimeout(o.scrollTimer);
}
// 如果暂停了滚动(鼠标放到了滚动层上)
// 开始以10毫秒的时间间隔运行滚动
if (o.isPause) {
o.scrollTimer = setTimeout(anim, 10);
return;
}
// 当显示完所有信息后(这时滚动的距离就等于要滚动信息的高度msg_h)
// 这时又重新开始滚动,将滚动距离清零
if (msg_h - o.scrollValue <= 0) {
o.scrollValue = 0;
}
else {
o.scrollValue += 1;
o.scrollHeight += 1;
}
// 根据浏览器的不同,处理滚动
if (o.isMoz) { // Mozilla引擎浏览器
s_area.scrollTop = o.scrollValue;
}
else { // 其余的浏览器则使用控制CSS样式处理滚动
s_msg.style.top = -1 * o.scrollValue + “px”;
c_msg.style.top = (msg_h - o.scrollValue) + “px”;
}
// 滚动高度等于显示滚动区域高度时(滚动完一行,一行内容全部显示)
// 暂停4秒中,然后再开始执行下依次滚动。
if (o.scrollHeight % s_area.offsetHeight == 0) {
o.scrollTimer = setTimeout(anim, o.speed);
}
else {
// 在两行内容之间过度滚动时,每10豪秒上升1px
o.scrollTimer = setTimeout(anim, 10);
}
};
// 执行滚动
anim();
};
/**
* scrollVertical 垂直滚动的构造函数
* @param {Object} disp - 必须 显示滚动区域的DOM节点(或节点ID)
* @param {Object} msg - 必须 被显示的信息的DOM节点(或节点ID)
* @param {string} tg - 可选 以什么标记为一行的标签名称(tagName)
*/
function scrollVertical(disp, msg, tg){
// 给在之前定义的this.scr