欧美电视剧网站大全:Asp.Net无缝滚动(转)

来源:百度文库 编辑:中财网 时间:2024/04/28 07:18:06

图片滚动包括由左向右,由右向左,由下向上和由上到下。其实原理都是一样的。这里主要讲的是有由右向左滚动。

实现效果:

先看一下代码:

<%@ Page Language="C#" CodeFile="Default2.aspx.cs" Inherits="Default2" %>



    图片滚动



 




 
 


  
  
   
  
  

                //这里我用的DataList
                   
                       
     
     
     
     
     
    
     

      " alt="点击查看..." width="105" height="80" border="0" onload="javascript:DrawImage(this);">
     

     

     

     

 


 

                    TypeName="BLL.BI">//这里使用ObjectDataSource控件绑定数据

这里最主要的就是那两个js代码。上边的js实现了图片大小的控制,下边的js实现了图片无缝隙(有好多用marquee属性直接滚动的,直到全部滚动完毕才开始下一次的滚动,这样就会出现了很大的空白)这样就解决了空白问题。用DateList可以控制显示的方向,但是不要控制显示数量,这里限制数量是靠div的宽度和高度控制的。根据实际滚动方向调整DateList的显示方向。

这里最难理解的就是下面的js。其实无缝滚动的精华就在这里。下面给大家解释一下。

var Picspeed=15就是设置计数器停顿时间(滚动速度)其中还有一些奇怪的属性,以下给大家介绍一下无缝技术的原理:

一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。
先了解一下对象的几个的属性:
innerHTML:设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

根据这些就可以随意改变上边的代码实现上下左右的无缝滚动了。

参考以下滚动简单的修改就可以实现了:

向上滚动:


 
 
 
 
 
 
 
 
 
 

 

 

  

向下滚动:


 

 
 
 
 
 
 
 
 
 
 

 

 

   

向左滚动:








 

向右滚动: