图片循环整体滚动是如何实现的！
日期：2014-05-18 浏览次数：20454 次
图片循环整体滚动是怎么实现的！！
一行多列可变的图片无限滚动，有整体翻动的感觉。而不是流水感。
如http://bbs.163.com/ 论坛帖图模块
------解决方案--------------------
不会，帮楼主顶
------解决方案--------------------
javascript 应该可以看到源代码
------解决方案--------------------
<%@ 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>
一行多列可变的图片无限滚动，有整体翻动的感觉。而不是流水感。
如http://bbs.163.com/ 论坛帖图模块
------解决方案--------------------
不会，帮楼主顶
------解决方案--------------------
javascript 应该可以看到源代码
------解决方案--------------------
<%@ 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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
