Advanced Search

scrollTo example

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2.   <head>
  3.     <title></title>
  4.     <meta content="">
  5.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
  6.     <script type="text/javascript" src="jquery.scrollTo.js"></script>	
  7.     <script type="text/javascript">
  8.  
  9.  
  10.     $(function(){
  11.  
  12. 	var sc = {};
  13. 	sc.container = jQuery(".news-container");
  14. 	sc.items = $("#newslist li");
  15. 	sc.cle = 1;  
  16. 	sc.timer = null;
  17.  
  18. 	sc.scrollTimed = function(){ 
  19.  
  20. 	  sc.container.scrollTo(sc.items[sc.cle], 600);
  21. 	  sc.cle == sc.items.length -1 ? sc.cle = 0 : sc.cle++;
  22.  
  23. 	};
  24.  
  25. 	sc.start = function(){
  26. 	  sc.timer = setInterval(function(){sc.scrollTimed()}, 2000);
  27. 	};
  28.  
  29. 	sc.stop = function(){
  30. 	  clearInterval(sc.timer);
  31. 	};
  32.  
  33. 	sc.container.mouseover(function(){sc.stop();}).mouseout(function(){sc.start()});
  34.  
  35. 	sc.start();
  36.  
  37.      });
  38.  
  39.  
  40.  
  41.     </script>
  42.     <style>
  43.     .news-container{ height: 195px; overflow: hidden; width: 351px;}
  44.     </style>
  45.   </head>
  46.   <body>
  47.   <div class="news-container">
  48.     <ul id="newslist" class="news_list">
  49. 	<li>
  50. 	    <h3><a href="/news/show/id/12">Ouverture du site web</a></h3>
  51. 	    <p>Mise en ligne du site internet www.orchestre-symphonique-orleans.com</p>
  52. 	</li>
  53. 	<li>
  54. 	    <h3><a href="/news/show/id/14">Ouverture de la saison</a></h3>
  55. 	    <p>Ouverture de la saison « les 9e Symphonies à Orléans… »</p>
  56. 	</li>
  57. 	<li>
  58. 	    <h3><a href="/news/show/id/16">Conférence sur les 9e Symphonies</a></h3>
  59. 	    <p>Réalisé par Gildas Harnois vendredi 5 mars 2010 à 18h au Forum de la Fnac – entrée libre.</p>
  60. 	</li>
  61. 	<li>
  62. 	    <h3><a href="/news/show/id/67">Concert à Saint-Malo</a></h3>
  63. 	    <p>L’orchestre Symphonique d’Orléans en concert à l’Auditorium du Grand Large de St Malo le vendredi 30 avril 2010 à 20h30</p>
  64. 	</li>
  65. 	<li>
  66. 	    <h3><a href="/news/show/id/71">Concerts complets</a></h3>
  67. 	    <p>Les 9 et 10 janvier, les concerts seront donnés à guichets fermés</p>
  68. 	</li>
  69.     </ul>        
  70.   </div>
  71. </body>
  72. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.