html소스는 페이지 하단에 삽입

<a href="#" id="top_btn">상단으로</a>


제이쿼리 스크립트는 그보다 아래에 삽입

<script>

$(function() {

    $("#top_btn").on("click", function() {

        $("html, body").animate({scrollTop:0}, '500');

        return false;

    });

});

$( window ).scroll( function() {

  if ( $( this ).scrollTop() > 200 ) {

    $( '#top_btn' ).fadeIn();

  } else {

    $( '#top_btn' ).fadeOut();

  }

} );

</script>



css 소스 삽입

#top_btn{position:fixed;bottom:10%;right:5%;display:none;width:50px;height:50px;border-radius:5px;background-color:#fff !important;text-indent:-9999px;background:url("../img/top_btn.gif") center center no-repeat; overflow:hidden;opacity:0.8;z-index: 999;}






저작자표시 비영리 변경금지

'웹 퍼블리싱 > Javascript' 카테고리의 다른 글

유용한 제이쿼리 슬라이드  (0) 2018.08.14
쓸만한 제이쿼리 예제 사이트  (0) 2015.07.17
제이쿼리 배경 슬라이드 플러그인  (0) 2015.07.17

http://www.basic-slider.com/




// width and height need to be provided to enforce consistency
// if responsive is set to true, these values act as maximum dimensions
width : 700,
height : 300,

// animation values
animtype : 'fade', // accepts 'fade' or 'slide'
animduration : 450, // how fast the animation are
animspeed : 4000, // the delay between each slide
automatic : true, // automatic

// control and marker configuration
showcontrols : true, // show next and prev controls
centercontrols : true, // center controls verically
nexttext : 'Next', // Text for 'next' button (can use HTML)
prevtext : 'Prev', // Text for 'previous' button (can use HTML)
showmarkers : true, // Show individual slide markers
centermarkers : true, // Center markers horizontally

// interaction values
keyboardnav : true, // enable keyboard navigation
hoverpause : true, // pause the slider on hover

// presentational options
usecaptions : true, // show captions for images using the image title tag
randomstart : true, // start slider at random slide
responsive : true // enable responsive capabilities (beta)


            




                    

  





  



  





    
        
            저작자표시 비영리 변경금지 
        
    


  




                    


  
'웹 퍼블리싱 > Javascript' 카테고리의 다른 글

  

    

      아래로 스크롤 하면 나타나는 위로가기버튼  (0)
      2018.08.16
    

    

      쓸만한 제이쿼리 예제 사이트  (0)
      2015.07.17
    

    

      제이쿼리 배경 슬라이드 플러그인  (0)
      2015.07.17
    

  






    


    

    

  


          
      
          
  

  

    

      
    


    

      
            



            

http://jquerydemo.com/


----------------------------------------


제이쿼리 이미지 슬라이더
Jssor Slider 이미지 슬라이더 예제 모음 사이트

http://www.jssor.com/





            




                    

  





  



  





    
        
            저작자표시 비영리 변경금지 
        
    


  




                    


  
'웹 퍼블리싱 > Javascript' 카테고리의 다른 글

  

    

      아래로 스크롤 하면 나타나는 위로가기버튼  (0)
      2018.08.16
    

    

      유용한 제이쿼리 슬라이드  (0)
      2018.08.14
    

    

      제이쿼리 배경 슬라이드 플러그인  (0)
      2015.07.17
    

  






    


    

    

  


          
      
          
  

  

    

      
    


    

      
            



            

jquery-bgslider-1.0.2.zip



Plug-in Instruction 
BgSlider는 배경이미지를 가로 또는 세로 방향으로 슬라이드 해주는 플러그-인 입니다. 
jCarousel 플러그-인 에서 영감을 받아 개발하게 되었습니다. 

보통 슬라이드 플러그-인은 이미지 또는 각 엘리먼트의 위치를 컨트롤 하는 방법으로 제작되었습니다만, 배경이미지를 슬라이드 해주는 플러그-인을 찾아볼 수 없었기에, 이번 기회에 개발해보게 되었습니다. 

제목-없음-1 

위 화면과 같이, 붙여진 이미지를 배경으로 설정하고, 위치를 조절하는 슬라이드 하는 플러그-인입니다. 


Plug-in 사용 방법 
BgSlider 플러그-인은 다음과 같이, 간단하게 사용할 수 있습니다. 
<script type=”text/javascript” src=”jquery.BgSlider.js”> 
<script type=”text/javascript”>$(document).ready(function(){  $(“.mySlide”).BgSlider(); });</script> 
<style type=”text/css”> 
  .mySlide{ width:320px; height:180px; background:url(“images/pictures.gif”) left top no-repeat } 
</style> 
… 
<div class=”mySlide”></div> 

좀 더 자세한 설정을 할 수도 있습니다. 아래, 플러그-인 Properties 표를 참고하세요. 
<script type=”text/javascript” src=”jquery.BgSlider.js”> 
<script type=”text/javascript”> 
$(document).ready(function(){ 
  $(“.mySlide”).BgSlider({ 
    item: 2, //붙여진 이미지 개수 
    interval: 1000, 
    speed: “slow” 
  }); 
}); 
</script> 
<style type=”text/css”> 
  .mySlide{ width:320px; height:180px; background:url(“images/pictures.gif”) left top no-repeat } 
</style> 
… 
<div class=”mySlide”></div> 


Plug-in Properties/Methods 
속성(Properties)	값(Value)	설명(description) 
item	Number(1,2,3…)	슬라이드 개수 
interval	Miliseconds(1000,2000,…)	슬라이드를 실행하는 초 간격입니다. 
speed	“slow”,”fast”,Miliseconds(1000,2000,…)	슬라이드의 속도를 설정합니다. 
easing	“linear”,”swing”	슬라이드의 방법을 설정합니다. 
vertical	boolean(true, false)	세로 슬라이드 여부 
disabled	boolean(true, false)	슬라이드 사용여부 
width	Number(1,2,3…)	슬라이드 대상 엘리먼트의 가로 크기 
height	Number(1,2,3…)	슬라이드 대상 엘리먼트의 세로 크기 

함수(Methods)	설명(description) 
callback()	슬라이드를 강제로 실행합니다. 
execute([selector],“enable”|”disable”)	슬라이드를 중지하거나 실행합니다. 
reload()	변경한 설정 값을 적용하기 위해, 슬라이드를 다시 로드합니다. 


Plug-in License 
본 플러그-인을 개발자의 허락 없이 상업적으로 이용하거나, 임의로 배포하는 것을 엄격히 금합니다. 
재배포는 링크를 통해서 해주시고, 개인적으로 사용하는 것은 마음껏 하셔도 됩니다. 

본 플러그-인은 jQuery Library를 기반으로 개발되었습니다. 



저작권 출처 
종류	컨텐츠명	출처 
이미지	Coding icon	CrossXP’s X-Blog 
첨부파일	jquery.BgSlider.js	CrossXP’s X-Blog



            




                    

  





  



  





    
        
            저작자표시 비영리 변경금지 
        
    


  




                    


  
'웹 퍼블리싱 > Javascript' 카테고리의 다른 글

  

    

      아래로 스크롤 하면 나타나는 위로가기버튼  (0)
      2018.08.16
    

    

      유용한 제이쿼리 슬라이드  (0)
      2018.08.14
    

    

      쓸만한 제이쿼리 예제 사이트  (0)
      2015.07.17
    

  






    


    

    

  


          
      

          

          

          
            

              
+ Recent posts

              
    
                
                
    
              

            

          

          


          
        
 
      
 
    
 
  

  
  
  
  
  


  
티스토리툴바