JS achieve seamless picture perfect solution rolling

Posted by john
2/26/2007
Related Tags:
div rolling  css rolling 

  Presumably we have noted <marquee> not rolling cycle, so there are a lot of alternative scripts, or iframe or JS output <marquee>, no matter how done, a little trouble.    Below talk about the realization of this idea is relatively simple: a set Width exceeded its width and hide the contents of the container demo, putting demo1 and demo2, demo1 is rolling, demo2 for demo1 direct cloning, by continuously changing the scrollTop or demo1 scrollLeft achieve the purpose of rolling, rolling to demo1 when at the junction with demo2 directly SKIP initial position, because demo1 and demo2, so Banbuchu beating the moment, so as to achieve "seamless" rolling purposes. 

  First understand what the targets of several attributes: 
  InnerHTML: Setting up or acquiring objects starting and ending at the html tag 
  ScrollHeight: access to highly targeted rolling. 
  ScrollLeft: Setting up or acquisition target in the left Border of the current window and that the content of the distance between the extreme left 
  ScrollTop: Setting up or acquisition target in the top window and the contents of the most visible in the distance between the top of 
  ScrollWidth: Acquiring objects rolling width 
  OffsetHeight: access to the layout of objects from the father or the designated coordinates offsetParent attribute the high degree of Father coordinates 
  OffsetLeft: access to the layout of objects or attributes specified by the offsetParent father coordinates the Position of the left 
  OffsetTop: access to the layout of objects or attributes specified by the offsetTop father coordinates the calculation of the top position 
  OffsetWidth: access to the layout of objects or attributes from Father coordinates offsetParent designated coordinates the width of the Father 

  Well, look at this upward rolling code: 

  <base Href="http://www.webjx.com"> 
  <div Id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff> <div id=demo1> 
  <img Src="images/flash8.gif"> 
  <img Src="images/link/flashempire.gif"> 
  <img Src="images/linklogo/shlogo.gif"> 
  <img Src="images/link/deskcity.gif"> 
  <img Src="images/linklogo/5dmeng.gif"> 
  <img Src="/Upload/2004_Pack/logo.gif"> 
  <img Src="images/link/flashskylogo.gif"> 
  <img Src="images/link/5dlogo88.gif"> 
  <img Src="/Upload/2004_Pack/link.gif"> 
  </ Div> 
  <div Id=demo2> </ div> 
  </ Div> 
<script>
  Var speed = 30 
  Demo2.innerHTML = demo1.innerHTML file: / / Cloning demo1 for demo2 
  Function Marquee () ( 
  If (demo2.offsetTop-demo.scrollTop <= 0) file: / / demo1 when rolling to the junction with demo2 
  Demo.scrollTop-= demo1.offsetHeight file: / / Skip to the top of demo 
  Else ( 
  Demo.scrollTop 
  ) 
  ) 
  Var MyMar = setInterval (Marquee, speed) file: / / Set the timer 
  Demo.onmouseover = function () (clearInterval (MyMar)) / / Mouse when he removed the timer to stop the rolling purpose 
  Demo.onmouseout = function () (MyMar = setInterval (Marquee, speed)) / / reset the mouse away when the timer 
  </ Script> 

  Scroll down: 

  <base Href="http://www.webjx.com"> 
  <div Id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff> 
  <div Id=demo1> 
  <img Src="images/flash8.gif"> 
  <img Src="images/link/flashempire.gif"> 
  <img Src="images/linklogo/shlogo.gif"> 
  <img Src="images/link/deskcity.gif"> 
  <img Src="images/linklogo/5dmeng.gif"> 
  <img Src="/Upload/2004_Pack/logo.gif"> 
  <img Src="images/link/flashskylogo.gif"> 
  <img Src="images/link/5dlogo88.gif"> 
  <img Src="/Upload/2004_Pack/link.gif"> 
  </ Div> 
  <div Id=demo2> </ div> 
  </ Div> 
<script>
  Var speed = 30 
  Demo2.innerHTML = demo1.innerHTML 
  Demo.scrollTop = demo.scrollHeight 
  Function Marquee () ( 
  If (demo1.offsetTop-demo.scrollTop> = 0) 
  Demo.scrollTop = demo2.offsetHeight 
  Else ( 
  Demo.scrollTop--- 
  ) 
  ) 
  Var MyMar = setInterval (Marquee, speed) 
  Demo.onmouseover = function () (clearInterval (MyMar)) 
  Demo.onmouseout = function () (MyMar = setInterval (Marquee, speed)) 
  </ Script> 

  Rolling left: 

  <base Href="http://www.webjx.com"> 
  <div Id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff> 
  <table Align=left cellpadding=0 cellspace=0 border=0> <tr> <td id=demo1 valign=top> 
  <img Src="images/link/flashempire.gif"> <img src="images/linklogo/shlogo.gif"> 
  <img Src="images/link/deskcity.gif"> <img src="images/linklogo/5dmeng.gif"> 
  <img Src="/Upload/2004_Pack/logo.gif"> <img src="images/link/flashskylogo.gif"> 
  <img Src="images/link/5dlogo88.gif"> <img src="/Upload/2004_Pack/link.gif"> 
  <img Src="images/flash8.gif"> </ td> <td id=demo2 valign=top> </ td> </ tr> </ table> </ div> 
<script>
  Var speed = 30 
  Demo2.innerHTML = demo1.innerHTML 
  Function Marquee () ( 
  If (demo2.offsetWidth-demo.scrollLeft <= 0) 
  Demo.scrollLeft-= demo1.offsetWidth 
  Else ( 
  Demo.scrollLeft 
  ) 
  ) 
  Var MyMar = setInterval (Marquee, speed) 
  Demo.onmouseover = function () (clearInterval (MyMar)) 
  Demo.onmouseout = function () (MyMar = setInterval (Marquee, speed)) 
  </ Script> 

  Rolling right: 

  <base Href="http://www.webjx.com"> 
  <div Id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff> 
  <table Align=left cellpadding=0 cellspace=0 border=0> <tr> <td id=demo1 valign=top> 
  <img Src="images/link/flashempire.gif"> <img src="images/linklogo/shlogo.gif"> 
  <img Src="images/link/deskcity.gif"> <img src="images/linklogo/5dmeng.gif"> 
  <img Src="/Upload/2004_Pack/logo.gif"> <img src="images/link/flashskylogo.gif"> 
  <img Src="images/link/5dlogo88.gif"> <img src="/Upload/2004_Pack/link.gif"> 
  <img Src="images/flash8.gif"> </ td> <td id=demo2 valign=top> </ td> </ tr> </ table> </ div> 
<script>
  Var speed = 30 
  Demo2.innerHTML = demo1.innerHTML 
  Demo.scrollLeft = demo.scrollWidth 
  Function Marquee () ( 
  If (demo.scrollLeft <= 0) 
  Demo.scrollLeft = demo2.offsetWidth 
  Else ( 
  Demo.scrollLeft--- 
  ) 
  ) 
  Var MyMar = setInterval (Marquee, speed) 
  Demo.onmouseover = function () (clearInterval (MyMar)) 
  Demo.onmouseout = function () (MyMar = setInterval (Marquee, speed)) 
  </ Script> 

Related articles:

SEO: Links quality leakage problems
  We all know that PR value leakage problem, the problem seems to link the quality of leakage few people mentioned.    Seems to be a very reasonable also it is easy to understand the principle, which is a page of links to more links to each of the lower quality, if you have a reverse...
Virtual Console buy some foreign Experience
  Foreign host most of the characteristics of PHP MYSQL APACHE CPANEL mainframe, which is a very powerful CPANEL mainframe management software, and PHP, MYSQL and APACHE is free software.    ASP space and less expensive host, the host ASP SQLServer estimated the price is high, of cou...
WEB2.0 standards handbook: sixth XHTML code norms
  At the beginning of formal content creation, we must first understand what the code web standards specifications.    Understanding of these norms can help you make detours less, as soon as possible through the code validation.    So that we have a unified code, the only s...
Home in adding their own voice
  Home would like to add my voice? Want others to enter the home when you heard a cordial greetings, or a brief introduction? With me so fast, easy to get, very simple.    Generally speaking voices in the Home added three methods, one is to use signs to join <bgsound> Backgroun...
Key words how the site planning and deployment strategies
  Today robin would like to talk to you about the work of the search engine optimization Keywords deployment strategy, and hopes to give some seo lovers or about seo from working in the information industry friends.    Key words in the strategy for the deployment of search engine op...