가로 스크롤 배너 (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>  

:

ajax 로딩된 페이지 내에서만, 링크걸기

카테고리 없음 2018. 7. 6. 19:34 |

ajax 로딩된 페이지 내에서만, 링크걸기

 

1. onclick="location.href='#'" 형태의 링크걸기

 

<script>

$(document).ready(function(){
$('.t_ok').bind('click', function(e) {          
  var url = $(this).data('url');
  $('#rightwrap').load(url); // load the html response into a DOM element
  e.preventDefault(); // stop the browser from following the link
});
});
</script>


<li class="t_ok" data-url="./sum_right.asp?d_cd=10">링크</li>

 

 

2. a 태그에 바로 링크걸기

 

<script>

$(document).ready(function(){
$('a.t_ok').bind('click', function(e) {          
  var url = $(this).attr('url');
  $('#rightwrap').load(url); // load the html response into a DOM element
  e.preventDefault(); // stop the browser from following the link
});
});
</script>

<li><a href="./sum_right.asp?d_cd=10" class="t_ok">링크</a></li>


<div id="rightwrap"></div>

:

환율 json

카테고리 없음 2018. 4. 18. 21:46 |

환율 참고페이지 http://pureani.tistory.com/4919

 

previewcopy to clipboardprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  5. <title></title>  
  6. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
  7.   
  8. <script>  
  9. $(document).ready(function(){  
  10.   
  11.   
  12.   
  13. $.ajax({  
  14.     url:"http://api.manana.kr/exchange/rate/KRW/JPY,KRW,USD.json",  
  15.     dataType: "json",  
  16.     success:function(data){  
  17.        alert(data[2].name);  
  18.        alert(data[2].rate);  
  19.        alert(data[2].date);  
  20.     }  
  21.     ,error: function () { alert("에러발생"); }  
  22. });  
  23.   
  24. });  
  25.   
  26.   
  27. </script>  
  28.   
  29. </head>  
  30. <body>  
  31.   
  32. </body>  
  33. </html>  

:

티스토리툴바