1. 程式人生 > >jquery處理滾動條事件

jquery處理滾動條事件

   當頁面的滾動條上下移動時,飄浮廣告隨著滾動條的滾動而上移或者下移,要明白兩點,第一:放廣告的層最好採用絕對定位,它的位置應該隨著滾動條的改變而上下移動,滾動條的滾動促發的是onscroll事件,廣告條所在的層的top值就是滾動條的高度,具體程式碼如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript"  src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
           $(window).scroll

(function(){ 
             var vtop=$(document).scrollTop();
             var vv=eval(vtop+200)+"px";
             $("#tv").css('left',$(document.body).width()+"px")
             $("#tv").css('top',vv);
             //$("#tv").animate({top:});
 }); 
        }
)
</script>
</head>
<body>
 <form method="post" action="">
 <div id="tv" style="position:absolute;top:60px;">我愛中國</div> 
<div  id="nn">
  <button class="int">sdfdsfds</button> <label for="username">使用者名稱:</label> <input type="text" id="username" class="required"/>  
   sdsdfsdsdfsdfsdfdsf
</div>
<div></div>
</form>
</body>
</html>

$(window).height();獲取瀏覽器顯示區域的高度;

$(window).width();獲取瀏覽器顯示區域的寬度;

$(document.body).height();獲取頁面文件的高度;

$(document.body).width();獲取頁面文件的寬度;

$(document).scrollTop();獲取滾動條到頂部的高度;

$(document).scrollLeft();獲取滾動條到左邊的寬度;