reenadak

ticker

May 23rd, 2018
286
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 2.12 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>JQuery Referencing</title>
  5. <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  6. <script>window.jQuery || document.write('<script src="jquery-3.3.1.js">\x3C/script>')</script>
  7.  
  8.     <style type="text/css">
  9.         body{
  10.             width: 400px;
  11.             margin: 0px auto;
  12.         }
  13.  
  14.         .ticker{
  15.             background-color: khaki;
  16.             width: 480px;
  17.             height: 180px;
  18.             border: 3px solid darkred;
  19.             overflow: hidden;
  20.             border-radius: 15px;
  21.             padding: 10px;
  22.         }
  23.  
  24.         ul{
  25.             margin: 1px;
  26.             padding: 1px;
  27.         }
  28.  
  29.         li{
  30.             text-align: justify;
  31.             list-style: none;
  32.             padding: 10px;
  33.             border-bottom: 1px dashed blue;
  34.         }
  35.  
  36.  
  37.        
  38.     </style>
  39.  
  40.     <script>
  41.         var interval;
  42.  
  43.         function startTicker()
  44.         {
  45.             $("#news li:first").slideUp(function(){
  46.                 $(this).appendTo($("#news")).slideDown();
  47.             });
  48.         }
  49.  
  50.         interval = setInterval(startTicker, 3000);
  51.  
  52.         function stopTicker(){
  53.             clearInterval(interval);
  54.         }
  55.  
  56.         $(document).ready(function(){
  57.             $("#news").hover(function(){
  58.                 stopTicker()
  59.             }, function(){
  60.                 interval = setInterval(startTicker, 2000);
  61.             })
  62.         });
  63.  
  64.  
  65.     </script>
  66.  
  67. </head>
  68. <body>
  69. <div class="ticker">
  70. <ul id="news">
  71.     <li>1 This is first news. 1This is first news. This is first news. 1This is first news. This is first news. This is first news. This is first news. </li>
  72.     <li>2 This is first news. T2his is first news. This is first news. T2his is first news. This is first news. This is first news. This is first news. </li>
  73.     <li>3 This is first news. Th3is is first news. This is first news. Th3is is first news. This is first news. This is first news. This is first news. </li>
  74.     <li>4 This is first news. Thi4s is first news. This is first news. Thi4s is first news. This is first news. This is first news. This is first news. </li>
  75.     <li>5 This is first news. This5 is first news. This is first news. This5 is first news. This is first news. This is first news. This is first news. </li>
  76.     <li>6 This is first news. This 6is first news. This is first news. This 6is first news. This is first news. This is first news. This is first news. </li>
  77. </ul>
  78. </div>
  79.  
  80.  
  81. </body>
  82. </html>
Advertisement
Add Comment
Please, Sign In to add comment