가로 스크롤 배너 (marquee)

카테고리 없음 2018. 7. 13. 19:45 |

가로 스크롤 배너 (marquee)

 

previewcopy to clipboardprint?
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  6. <meta name="viewport" content="width=device-width, initial-scale=1">  
  7. <title>jQuery ticker Plugin Demos</title>  
  8.   
  9. <style>  
  10. .js-ticker {  
  11.   overflow: hidden;  
  12. }  
  13.   
  14. .js-ticker-track {  
  15.   white-space: nowrap;  
  16. }  
  17.   
  18. .js-ticker-item {  
  19.   white-space: normal;  
  20.   height: 100%;  
  21.   vertical-align: top;  
  22.   display: inline-block;  
  23.   position: relative;  
  24. }  
  25.   
  26. @supports ((display: -webkit-box) or (display: flex)) {  
  27.   .js-ticker-track {  
  28.     position: relative;  
  29.     white-space: normal;  
  30.     display: -webkit-inline-box;  
  31.     display: -ms-inline-flexbox;  
  32.     display: inline-flex;  
  33.   }  
  34.   .js-ticker-item {  
  35.     height: auto;  
  36.     display: block;  
  37.     -webkit-box-flex: 0;  
  38.         -ms-flex: 0 0 auto;  
  39.             flex: 0 0 auto;  
  40.   }  
  41.   .js-ticker.active .js-ticker-track {  
  42.     display: -webkit-box;  
  43.     display: -ms-flexbox;  
  44.     display: flex;  
  45.   }  
  46.   .js-ticker.active .js-ticker-item {  
  47.     -webkit-box-flex: 1;  
  48.         -ms-flex: 1 0 auto;  
  49.             flex: 1 0 auto;  
  50.   }  
  51. }  
  52. </style>  
  53.   
  54. <style>  
  55. .default-ticker {width:1000px; height:80px; margin:0 auto; background:#f7f7f7}  
  56. .default-ticker div img {margin-right:15px !important}  
  57. </style>  
  58. </head>  
  59. <body>  
  60.   
  61.   
  62. <div class="default-ticker">  
  63.   <div><img src="http://www.djhoneymoon.com/images/hotel/banyantree.png" /></div>  
  64.   <div><img src="http://www.djhoneymoon.com/images/hotel/trisara.png" /></div>  
  65.   <div><img src="http://www.djhoneymoon.com/images/hotel/pullman.png" /></div>  
  66.   <div><img src="http://www.djhoneymoon.com/images/hotel/pavilions.png" /></div>  
  67.   <div><img src="http://www.djhoneymoon.com/images/hotel/shore.png" /></div>  
  68. </div>  
  69.   
  70.   
  71. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>  
  72. <script src="http://www.djhoneymoon.com/js/ticker.js"></script>  
  73. <script>  
  74. $(document).ready(function(){  
  75. $(".default-ticker").ticker({  
  76.   
  77.   // item selector  
  78.   item: 'div',  
  79.   
  80.   // Toggles whether the ticker should pause on mouse hover  
  81.   pauseOnHover: true,  
  82.   
  83.   // <a href="https://www.jqueryscript.net/animation/">Animation</a> speed  
  84.   speed: 60,  
  85.   
  86.   // Decides whether the ticker breaks when it hits a new item or if the track has reset  
  87.   pauseAt: '',  
  88.   
  89.   // delay in milliseconds  
  90.   delay: 500  
  91.   
  92. });  
  93. });  
  94. </script>  
  95.   
  96. </body>  

:

티스토리툴바