多列可变的图片无限滚动

来源：互联网发布：淘宝网如何做代销编辑：程序博客网时间：2024/06/10 17:14

前几天我一朋友让我做了一行多列可变的图片无限滚动，有整体翻动的感觉。而不是流水感。
如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>

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>

<TR>

</TR>

</TABLE>

</ItemTemplate>

</asp:datalist></DIV>

</form>

</body>

</HTML>

后台数据绑定写一下就可以运行.