mramine364

Marquee 2nd alternative

Jan 17th, 2016
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 0.93 KB | None | 0 0
  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Marquee</title>
  5. </head>
  6. <style>
  7.     .container{
  8.         background-color: green;
  9.         width: 100%;
  10.         overflow: hidden;
  11.     }
  12.  
  13.     .container .marquee{
  14.         color: #DEF436;
  15.         font-weight: bold;
  16.         display: inline-block;
  17.         position: relative;
  18.     }
  19.  
  20. </style>
  21. <body>
  22.     <div class="container">
  23.         <div class="marquee">
  24.             Hello Programmers - Xyfful
  25.         </div>
  26.     </div>
  27. </body>
  28. <script>
  29. var c = document.querySelector(".container");
  30. var txt = document.querySelector(".container .marquee");
  31.  
  32. setInterval( marqueeFrame , 40 );
  33.  
  34. function marqueeFrame() {
  35.     var d = 3;
  36.     var step = 2;
  37.     var cw = c.offsetWidth;
  38.     var tw = txt.offsetWidth;
  39.     var left = txt.style.left;
  40.     var i = left.indexOf("p");
  41.     if( i!=-1 && left.substr(0,i)>=cw ){
  42.         txt.style.left = -tw+"px";
  43.     }else{
  44.         if( i==-1 ){
  45.             txt.style.left = step;
  46.         }else{
  47.             txt.style.left = parseInt(left.substr(0,i))+step;
  48.         }
  49.     }
  50. }
  51. </script>
  52. </html>
Advertisement
Add Comment
Please, Sign In to add comment