아는 것이 좋은 것이다.

[jQuery] 따라다니는 배너 본문

jQuery

[jQuery] 따라다니는 배너

start0 2014. 5. 30. 09:59
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
<!--
	//scroll the message box to the top offset of browser's scrool bar  
    $(window).scroll(function()  
    {  
        $('#banner').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});    
    });  
    //when the close button at right corner of the message box is clicked   
    $('#banner').click(function()  
    {  
        //the messagebox gets scrool down with top property and gets hidden with zero opacity   
        $('#banner').animate({ top:"+=15px",opacity:0 }, "slow");  
    });  
//-->
</script>


배너를 움직이는 제이쿼리 스크립트


<style type="text/css">
#banner {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
}
</style>
<div style="position:relative;float:left;width:80px;top:5%;left:90%;">  
        <div id="banner">배너 영역</div>  
</div>


따라다니는 배너의 스타일과 div 영역


Comments