前几天我一朋友让我做了一行多列可变的图片无限滚动,有整体翻动的感觉。而不是流水感。
如 http://bbs.163.com/ 论坛帖图模块 ,当时做好忘了放上来了,今天没事拿上与大家分享下.
<%
...
@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="WebApplication3.WebForm2"
%>
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
HTML
>
<
HEAD
>
<
title
>
WebForm2
</
title
>
<
meta
content
="Microsoft Visual Studio .NET 7.1"
name
="GENERATOR"
>
<
meta
content
="C#"
name
="CODE_LANGUAGE"
>
<
meta
content
="JavaScript"
name
="vs_defaultClientScript"
>
<
meta
content
="http://schemas.microsoft.com/intellisense/ie5"
name
="vs_targetSchema"
>

<
SCRIPT
>
...
marqueesHeight=100;//滚动区域高度设定
stopscroll=false;
function onlod()

...{
debugger
var icefable1=document.getElementById("icefable1");
icefable1.scrollTop=1;

with(icefable1)...{
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
}
preTop=0; currentTop=0; stoptime=0;

function init_srolltext()...{
var icefable1=document.getElementById("icefable1");
var icefable2=document.getElementById("icefable2");
icefable2.innerHTML="";
icefable2.innerHTML+=icefable1.innerHTML;
icefable1.innerHTML=icefable2.innerHTML+icefable2.innerHTML;
setInterval("scrollUp()",1);
}

function scrollUp()...{
var icefable1=document.getElementById("icefable1");
var icefable2=document.getElementById("icefable2");
if(stopscroll==true) return;
currentTop+=1;
if(currentTop==100)//向上滚动高度设定

...{
stoptime+=1;
currentTop-=1;
if(stoptime==200)//停顿时间设定

...{
currentTop=0;
stoptime=0;
}
}

else ...{
preTop=icefable1.scrollTop;
icefable1.scrollTop+=1;

if(preTop==icefable1.scrollTop)...{
icefable1.scrollTop=icefable2.offsetHeight-marqueesHeight;
icefable1.scrollTop+=1;
}
}
}

</
SCRIPT
>
</
HEAD
>
<
body
onload
="onlod();init_srolltext();"
MS_POSITIONING
="GridLayout"
>
<
form
id
="Form1"
method
="post"
runat
="server"
>
<
DIV
id
="icefable1"
><
asp:datalist
id
="dltImg"
runat
="server"
RepeatColumns
="2"
Width
="100px"
Height
="8px"
RepeatDirection
="Horizontal"
>
<
ItemTemplate
>
<
TABLE
height
="100"
cellSpacing
="0"
cellPadding
="0"
width
="100"
border
="0"
>
<
TR
>

<
TD
bgColor
="red"
>
<%
...
# DataBinder.Eval(Container.DataItem,"djsj")
%>
</
TD
>
</
TR
>
</
TABLE
>
</
ItemTemplate
>
</
asp:datalist
></
DIV
>
<
DIV
id
="icefable2"
style
="Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute"
></
DIV
>
<
FONT
face
="宋体"
></
FONT
><
FONT
face
="宋体"
></
FONT
><
FONT
face
="宋体"
></
FONT
>
</
form
>
</
body
>
</
HTML
>
后台数据绑定写一下就可以运行.
如 http://bbs.163.com/ 论坛帖图模块 ,当时做好忘了放上来了,今天没事拿上与大家分享下.



























































































