<
html
><
head
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
meta http
-
equiv
=
'Content
-
Type' content
=
'text
/
html; charset
=
gb2312'
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
script language
=
'JavaScript'
>
![None.gif](/Images/OutliningIndicators/None.gif)
var
scrollerheight
=
160
;
//
定义每个区域显示的高度
var
html,total_area
=
0
,wait_flag
=
true
;
//
初始化html串,总显示区域数,是否等待.
var
bMouseOver
=
1
;
//
鼠标放上去就不滚动了,这里硬编码为true
var
scrollspeed
=
5
;
//
滚动速度,其实是每次向上移动的象素数,值越大看起来越快
var
waitingtime
=
5000
;
//
每次翻动的等待时间,单位毫秒
var
s_tmp
=
0
//
初始移动次数
var
s_amount
=
32
;
//
它的值是由每次需要移动的象素除以scrollspeed换算出来的
var
scroll_content
=
new
Array();
//
声明一个数组
var
startPanel
=
0
, n_panel
=
0
, i
=
0
;
//
声明初始区域,区域个数和循环变量
![None.gif](/Images/OutliningIndicators/None.gif)
//
********************************************
//
这是我做的一个跟踪变量函数
//
在需要使用跟踪变量的地方直接调用trace()函数就可以了.
var
newwin;
![None.gif](/Images/OutliningIndicators/None.gif)
var
isDebug
=
1
;
![None.gif](/Images/OutliningIndicators/None.gif)
function
trace(s)
![None.gif](/Images/OutliningIndicators/None.gif)
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
if(isDebug)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
try
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
newwin.document.write(s + "<BR>");
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
catch(e)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
newwin = window.open("","trace");
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
newwin.document.write(s + "<BR>");
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![None.gif](/Images/OutliningIndicators/None.gif)
//
**********************************************
//
初始化滚动函数
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function
startscroll()
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//随机获取初始区域
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//startPanel是0到scroll_content下标的任意数
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
i=0;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
for(i in scroll_content)n_panel++;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
n_panel = n_panel -1;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
startPanel = Math.round(Math.random()*n_panel);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//如果初始区域是第一个元素,
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//调用insert_area把scroll_content里所有元素都装到DIV里
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
if(startPanel == 0)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
i=0;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
for(i in scroll_content)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
insert_area(total_area, total_area++);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
else
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//如果初始区域是最后一个元素
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//先把最后一个装进DIV,然后依次把其它元素装进DIY
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
if(startPanel == n_panel) //如果是最后一个元素
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
insert_area(startPanel, total_area);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
total_area++;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
for(i=0; i<startPanel; i++)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
insert_area(i,total_area);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
total_area++;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
else
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//如果初始区域不是第一个,也不是最后一个
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//先把当前区域装进DIV,
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//然后再把当前区域之前和之后的区域装进DIV
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
if((startPanel > 0) || (startPanel < n_panel))
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
insert_area(startPanel,total_area);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
total_area++;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
for(i=startPanel+1; i<=n_panel; i++)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
insert_area(i,total_area);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
total_area++;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
for(i=0; i<startPanel; i++)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
insert_area(i,total_area);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
total_area++;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//每隔waitingtime的时间调用一次scrolling()函数
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
window.setTimeout('scrolling()',waitingtime);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
//
滚动函数
function
scrolling()
![None.gif](/Images/OutliningIndicators/None.gif)
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//判断鼠标是否放上去,并且是否在等待
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
if(bMouseOver && wait_flag)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
trace("----------------------------");
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
for(i=0;i<total_area;i++)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//每次所有区域同意向上移动scrollspeed个象素
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
tmp = document.getElementById('scroll_area'+i).style;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
tmp.top = parseInt(tmp.top) - scrollspeed;
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
if(i==0)trace("第一个区域的顶部"+parseInt(tmp.top));
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//如果从屏幕种移出1个区域的话,被移出的区域从底部出现
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
if (parseInt(tmp.top) <= -scrollerheight)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
tmp.top = scrollerheight*(total_area-1);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
trace("移动次数:"+s_tmp);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//s_tmp是向上移动的次数,按理说应该移动到正好要移动的象素就该停止了
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//因为一次向上移动scrollspeed个象素,本例子中一次翻动要移动的象素就是scrollerheight
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//当然你也可以一次翻动两个scrollerheight
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//所以要移动scrollerheight/scrollspeed次,s_amount就是这样算出来的.
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//因为s_tmp是从0初始化的,所以减去1后才是真正一次翻动要移动的次数
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//但是呢,因为执行一次scrolling()函数,s_tmp就会增加scroll_content.length多次,
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//所以移动的次数应当是(s_amount-1)*scroll_content.length),
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//当翻动次数大于我们算出来的值的时候就要停止,也就是把向上移动的必要条件去调
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//这从跟踪变量的输出可以看出来
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
if(s_tmp++ > (s_amount-1)*scroll_content.length)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
trace("(s_amount-1)*scroll_content.length="+(s_amount-1)*scroll_content.length)
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
wait_flag=false;//进入等待
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//等待waitingtime,再消除等待,并且吧s_tmp归零.
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
window.setTimeout('wait_flag=true;s_tmp=0;',waitingtime);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
//设置1秒钟执行1000次本函数
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
window.setTimeout('scrolling()',1);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![None.gif](/Images/OutliningIndicators/None.gif)
![None.gif](/Images/OutliningIndicators/None.gif)
function
insert_area(idx, n)
![None.gif](/Images/OutliningIndicators/None.gif)
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
html='<div style="left: 0px; width: 100%; position: absolute; top: '+(scrollerheight*n)+'px" id="scroll_area'+n+'">';
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
html+=scroll_content[idx]+'';html+='</div>';document.write(html);
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
![None.gif](/Images/OutliningIndicators/None.gif)
//
下面的部分可以由asp循环生成
![None.gif](/Images/OutliningIndicators/None.gif)
scroll_content[
0
]
=
'
<
table height
=
140
align
=
center border
=
0
width
=
300
id
=
0
><
tr
><
td
><
a href
=
# target
=
_blank
><
IMG SRC
=
http:
//
onlytiancai/bak/77love/UploadAdPic/200572695027151.gif width=307 height=140 border=0></a></td></tr></table>';
scroll_content[
1
]
=
'
<
table height
=
140
align
=
center border
=
0
width
=
300
id
=
1
><
tr
><
td
><
a href
=
# target
=
_blank
><
IMG SRC
=
http:
//
onlytiancai/bak/77love/UploadAdPic/200572694642351.jpg width=307 height=140 border=0></a></td></tr></table>';
scroll_content[
2
]
=
'
<
table height
=
140
align
=
center border
=
0
width
=
300
id
=
2
><
tr
><
td
><
a href
=
# target
=
_blank
><
IMG SRC
=
http:
//
onlytiancai/bak/77love/UploadAdPic/200572694652122.jpg width=307 height=140 border=0></a></td></tr></table>';
startscroll();
</
script
>
From:
http://onlytiancai.cnblogs.com/archive/2005/07/27/201013.html
转载于:https://www.cnblogs.com/xiaodi/archive/2006/04/10/371641.html