Js代替marquee实现图片的无缝滚动Demo2012-02-15.docxVIP

%@PageLanguage=C#AutoEventWireup=trueCodeBehind=JSReplaceMarquee.aspx.csInherits=MyProgrammingDEMO.Pages.JSReplaceMarquee%!DOCTYPEhtmlPUBLIC-//W3C//DTD XHTML 1.0 Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtdhtmlxmlns=/1999/xhtmlheadrunat=servertitle/titlescriptsrc=../Scripts/jquery-1.4.1.min.jstype=text/javascript/scriptstyletype=text/css#demo {background: #FFF;overflow: hidden;border: 1pxdashed#CCC;height: 200px;text-align: center;float: left; }#demoimg {border: 3pxsolid#F2F2F2;display: block; }#demoDown {background: #FFF;overflow: hidden;border: 1pxdashed#CCC;height: 200px;text-align: center;float: left; }#demoDownimg {border: 3pxsolid#F2F2F2;display: block; }#demoLeft {background: #FFF;overflow: hidden;border: 1pxdashed#CCC;height: 100px;width: 1000px;text-align: center; }#demoLeftimg {border: 3pxsolid#F2F2F2;float: left;display: block; }#indemo {float: left;width: 800%; }#demoLeft1 {float: left; }#demoLeft2 {float: left; }#demoRight {background: #FFF;overflow: hidden;border: 1pxdashed#CCC;height: 100px;width: 1000px;text-align: center; }#demoRightimg {border: 3pxsolid#F2F2F2;float: left;display: block; }#demoInRight {float: left;width: 800%; }#demoRight1 {float: left; }#demoRight2 {float: left; }/style/headbodyformid=form1runat=serverdivb作用背景/bhr/p当marquee中滚动的是图片的时候，滚到中带你的时候直接就跳回到起点了，而不像文字那样可以无缝滚动。/pp以下用js实现/phr/b实现原理/bhr/p一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，br/ demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，br/当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，br/所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。/phr/b基础知识储备：/bhr/pbinnerHTML/b:设置或获取位于对象起始和结束标签内的HTMLbr/bscrollHeight /b：获取对象的滚动高度。br/bscrollLeft /b:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离br/bscrollTop/b:设置或获取位于对象顶端和窗口中可见内容的最顶端之间的距离br/bscrollWidth/b:获取对象的滚动宽度br/boffsetHeight/b:获取对象现对于版面或有父坐标offsetPa