熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> .NET編程 >> 正文

利用jQuery實現頁面漸顯效果

2013-11-13 09:55:21  來源: .NET編程 

  最近在看jQuery就在實際項目裡加了個小的應用當時的想法就是點擊一個鏈接跳轉到另個頁面時頁面是逐漸顯示出來也就是由透明到實體的一個過程!

  說下思路吧在body裡用一個div把所有的標簽包含住在此div後再定義一個div後面這個div是用來實現漸顯效果的

  如下所示

  <html>

  <body>

  <div id=bodyDiv>

  <!省略內部標簽>

  </div>

  <div id=hideDiv></div>

  </body>

  </html>

  我的想法是最後一個div定位在整個頁面最上層div的背景設為白色也就完全覆蓋了下面的div當點擊到該頁面時頁面加載完時上面這個div開始逐漸消失下面的div便實現了逐漸顯現的效果

  貼出jQuery代碼

   

  <script>

  $j(function() {

  $j(#hideDiv)css({ top: offsettop left: offsetleft width: $j(#bodyDiv)width() height: $j(form)height() backgroundColor: White opacity: position: absolute })//給hideDiv添加樣式

  if (jQueryisReady)//這裡是判斷頁面是否加載

  {

  $j(#hideDiv)fadeOut();//讓div逐漸消失的方法

  }

  });

  </script>

   

  代碼很簡單吧!呵呵!wirte less do more!

  自己琢磨出來實現漸顯頁面的思路也不知道大家的思路是什麼樣的如果有更好的方法歡迎大家一起研究啊!


From:http://tw.wingwit.com/Article/program/net/201311/11982.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.