loading效果實現的幾個場景

loading直譯就是正在載入中的意思，也就是在頁面載入的時候loading效果要出現，頁面載入完成的時候讓其消失。那麼以什麼來判斷頁面載入完成為節點去取消loading效果很重要，dom元素載入完成，還是頁面中的所有關聯檔案（包括），jquery給出了兩個函式來判斷這兩個節點，$(document).ready()是在頁面上所有dom元素載入完畢後才執行$(window).load();方法是在網頁中所有的元素（包括元素的關聯檔案）完全載入到瀏覽器後才執行，如何選擇則看實際情況去選擇，筆者使用的是$(window).load()方法，因為頁面上一般來說的載入最耗費時間，弄清楚這個的話，實現起來就不複雜了，在頁面標籤的頂部來新增loading層，以為dom元素的載入時從上往下的，放在最頂部可以保證loading效果會最早出現。[css]view plain

copy

[css]view plain

copy  
#loading  
載入的動態圖可以自己定義，但是越小越好，以為頁面中的載入時無序的，動態圖太大，可能載入不出來，導致效果無法實現。loading效果出現後，在頁面載入完成後，就要讓其消失。

copy

$(window).load(function());  

copy

var str = "";     

str+="";  

str+="";  

str+="

";  

var htmldata = str;  

$ ('body *:first').before(htmldata);  

下面提供一種針對ajax請求loading效果實現的方法，僅供參考。[html]view plain

copy

$(window).load(function()).ajaxstop(function());  

});  

首先想到的就是在頁面頂部加入乙個loading層，這個層的高度和寬度和頁面的高度和寬度應該一樣，並且遮蓋著這個頁面，在這個層的中間加入loading圖或者css3寫的loading效果，簡單的思路成型了。

[html]view plain

copy

[html]view plain

copy

#loading_all  

[html]view plain

copy

#loading_all div  

[html]view plain

copy

/*滾動條禁用*/  

.scoll_dis  

頁面載入完成後恢復滾動條。

[html]view plain

copy

$(window).load(function(),300);  

});  

pc端的loading效果就完成了，為什麼說pc端，是因為以上禁用滾動條的方法在移動端是無效的，螢幕還是可以被拖動。所以針對移動端，在頁面載入時要禁止螢幕的觸控事件，載入完成後要恢復觸控事件。

[html]view plain

copy

//阻止觸控事件  

document.addeventlistener("touchmove", myfunction);  

function myfunction(e)   

[html]view plain

copy

//解除觸控鎖定  

document.removeeventlistener("touchmove", myfunction);  

名片效果實現

模仿qq空間 微博等滑鼠懸浮在人名上時，顯示使用者詳細資訊 大體思路是將名片卡隱藏在頁面中，當懸浮時將名片卡移動到滑鼠邊，滑鼠移開時隱藏名片卡。本文的js使用了jquery 使用者名稱跟名片卡 如下 只是為了顯示類名，具體內容按需補充 使用者名稱 js 如下 var showmsgcardcontr...

抽屜效果實現

import viewcontroller.h define maxy 60 inte ce viewcontroller property nonatomic,weak uiview mainview property nonatomic,weak uiview leftview property...

漸入效果實現

首先我們來幅 析下漸入效果的原理 由圖可以看出，整個漸入的效果分為三層，分別為 最外層 內容包裹層和內容層。其中最外層 內容包裹層和內容層三層的寬高是一致的。開始狀態下，最外層和內容包裹層均將超出的部分隱藏，這樣其實最開始的時候只能看見最外層左邊的50 和內容包裹層左邊的50 內容是完全看不見的。首...