怎么在网页上制作滚动图片

怎么在网页上制作滚动图片？

20 [ 标签：网页, 图片] 时光☆流年 2012-03-12 23:00

满意答案

/** * 文字上下滚动 * @param flag 标识是否滚动 * @param fatherMarqueeContentId 父容器 * @param firMarqueeContentId 子容器1 * @param secMarqueeContentId 子容器2 * @param timeSpan 滚动时间间隔默

认为100毫秒 */

var MarqueeObj =

function(fatherMarqueeContentId,firMarqueeContentId,secMarqueeContent Id,timeSpan) {

this.flag = 0;

this.fatherMarqueeContentId = fatherMarqueeContentId;

this.firMarqueeContentId = firMarqueeContentId;

this.secMarqueeContentId = secMarqueeContentId;

this.timeSpan = timeSpan || 100; //初始化，开启循环滚动 this.init = function() { initScrollContentHeight(this); //定时器

setInterval(marquee,this.timeSpan); this.bindMouseOver();

this.bindMouseOut(); } //开始 this.start = function() { this.flag = 0; } //停止 this.stop = function() { this.flag = 1; } var that = this; //滚动核心函数 var marquee = function() { if(that.flag == 1) { return; } if(document.getElementById(that.firMarqueeContentId).offsetHeight

<= document.getElementById(that.fatherMarqueeContentId).scrollTop) { document.getElementById(that.fatherMarqueeContentId).scrollTop -= document.getElementById(that.firMarqueeContentId).offsetHeight; } else

{ document.getElementById(that.fatherMarqueeContentId).scrollTop

++; } } this.bindMouseOver = function()

{ document.getElementById(this.fatherMarqueeContentId).onmouseover = function() { that.stop(); } } this.bindMouseOut = function()

{ document.getElementById(this.fatherMarqueeContentId).onmouseout = function() { that.start(); } } /**初始化可滚动内容的高度 * 将可滚动内容的高度和父容器的高度比较，如果低于它， * 就将可滚动内容的高度置为父容器的高度 * @param obj 可滚动对象 */ var initScrollContentHeight =

function(obj){ if(document.getElementById(obj.firMarqueeContentId). scrollHeight <

document.getElementById(obj.fatherMarqueeContentId).offsetHeight){ document.getElementById(obj.firMarqueeContentId).style.height = document.getElementById(obj.fatherMarqueeContentId).offsetHeight + "px"; document.getElementById(obj.secMarqueeContentId).style.height = document.getElementById(obj.fatherMarqueeContentId).offsetHeight + "px"; }