啄木鸟测试网--第三方软件测试|软件登记测试|软件测试培训|软件本地化--如何实现广告图片的翻转效果


啄木鸟测试网

如何实现广告图片的翻转效果

作者：顾翔（xianggu@yahoo.com）转载请注明出处

实现广告图片的翻转效果,可以使用flash技术，但是也可以使用javascript技术。
<DIV id=scroll_image onmouseover=bMouseOver=0
style="Z-INDEX: 2; OVERFLOW: hidden; WIDTH: 183px; POSITION: absolute; HEIGHT: 180px"
onmouseout=bMouseOver=1>
<DIV id=content style="DISPLAY: none">
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><A href="pic/1b.jpg"
target=_blank><IMG title="" alt=""
src="pic/1s.jpg" border=0 ></a>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><A href="pic/2b.jpg"
target=_blank><IMG title="" style="MARGIN: 0px" alt=""
src="pic/2s.jpg" border=0 ></p>
</a>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><A href="pic/3b.jpg"
target=_blank><IMG title="" alt=""
src="pic/3s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><A href="pic/4b.jpg"
target=_blank><IMG title="" alt=""
src="pic/4s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><IMG title="" alt=""
src="pic/5s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><IMG title="" alt=""
src="pic/6s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><IMG title="" alt=""
src="pic/7s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><IMG title="" alt=""
src="pic/8s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><IMG title="" alt=""
src="pic/9s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><IMG title="" alt=""
src="pic/10s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><IMG title="" alt=""
src="pic/11s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><IMG title="" alt=""
src="pic/12s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellSpacing=0 cellPadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=middle>
<p align="center"><img border="0" src="pic/13s.jpg" > </p>
</TD>
</TR></TBODY></TABLE>

<BR>
<BR>

</DIV>
<SCRIPT language=JavaScript type=text/javascript>
var scrollerheight=parseInt(document.getElementById("scroll_image").style.height);
var html,total_area=0,wait_flag=true;
var bMouseOver = 1;
var scrollspeed = 1;
var waitingtime = 2000;
var s_tmp = 0, s_amount = parseInt(document.getElementById("scroll_image").style.height);
var scroll_content=new Array();
var startPanel=0, n_panel=0, i=0;

function startscroll()
{

for (i=0;i<scroll_content.length;i++)
n_panel++;

n_panel = n_panel -1 ;
startPanel = Math.round(Math.random()*n_panel);

if(startPanel == 0)
{
i=0;
for (i in scroll_content)
insert_area(total_area, total_area++);
}
else if(startPanel == n_panel)
{
insert_area(startPanel, total_area);
total_area++;
for (i=0; i<startPanel; i++)
{
insert_area(i, total_area);
total_area++;
}
}
else if((startPanel > 0) || (startPanel < n_panel))
{
insert_area(startPanel, total_area);
total_area++;
for (i=startPanel+1; i<=n_panel; i++)
{
insert_area(i, total_area);
total_area++;
}
for (i=0; i<startPanel; i++)
{
insert_area(i, total_area);
total_area++;
}
}
window.setTimeout("scrolling()",waitingtime);
}
function scrolling(){
if (bMouseOver && wait_flag)
{
for (i=0;i<total_area;i++){
tmp = document.getElementById('scroll_area'+i).style;
tmp.top = parseInt(tmp.top)-scrollspeed;
if (parseInt(tmp.top) <= -scrollerheight){
tmp.top = scrollerheight*(total_area-1);
}
if (s_tmp++ > (s_amount-1)*scroll_content.length){
wait_flag=false;
window.setTimeout("wait_flag=true;s_tmp=0;",waitingtime);
}
}
}
window.setTimeout("scrolling()",1);
}
function insert_area(idx, n){
html='<div style="z-index:1;margin:0px; width:'+document.getElementById("scroll_image").style.width+'; position: absolute; top: '+(scrollerheight*n)+'px" id="scroll_area'+n+'">';
html+=scroll_content[idx];
html+='</div>';
document.write(html);
}
var newsVar = 0;
obj=document.getElementById("content");
total_table=obj.getElementsByTagName("table").length;
for(v=0;v<total_table;v++){
scroll_content[v] = '<table width="100%" >'+obj.getElementsByTagName("table")[v].innerHTML+'</table>';
}
startscroll();
</SCRIPT>

相关链接：软件测试

【打印】【关闭窗口】