本篇文章給大家談談《手機網頁飄雪花》對應的知識點，希望對各位有所幫助。
本文目錄一覽：
網頁飄雪花的代碼是什么
在后臺添加js特效可實現這樣的效果。
js代碼為：
script language="JavaScript"
!--
var no = 5; //雪片數目
var speed = 20; //飄動速度。(值越大越慢)
var ns4up = (document.layers) ? 1 : 0; //當前瀏覽器類型，如果是NS則為1
var ie4up = (document.all) ? 1 : 0; //當前瀏覽器類型，如果是IE則為1
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;
x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8; //每次下落的高度，越小越平滑，但是也越慢
if (ns4up) { //以NS兼容方式
doc_width = self.innerWidth; //取頁面寬度
doc_height = self.innerHeight; //取頁面高度
}
else
if (ie4up) { //以IE兼容方式
doc_width = document.body.clientWidth; //取頁面寬度
doc_height = document.body.clientHeight; //取頁面高度
}
for (i = 0; i no; ++ i) { //根據前面定義的雪片數目寫進相應數目的層
initSnow(); //隨機初始化層的坐標
if (ns4up) { //如果瀏覽器是NS
//用layer作為雪片(星號)的容器
document.write("layer name="dot"+ i +"" left="1" ");
document.write("top="1" visibility="show"font color="red"");
document.write("*/font/layer");
}
else
if (ie4up) { //如果瀏覽器是IE
//用div作為雪片的容器
document.write("div id="dot"+ i +"" style="POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;"font color="red"");
document.write("*/font/div");
}
}
//初始化雪片，生成隨機坐標
function initSnow() {
a = 6;
r[i] = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx[i] = Math.random() * doc_width + 1;
cy[i] = Math.random() * doc_height + 1;
x[i] = r[i] * sn + cx[i];
y[i] = cy[i];
}
//計算雪花位置，從新位置上出現，看起來就像是新產生的一樣。
function makeSnow() {
r[i] = 1;
cx[i] = Math.random() * doc_width + 1;
cy[i] = 1;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
//雪花下落的計算
function updateSnow() {
r[i] += s;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
//在NS瀏覽器上處理雪片下落的主程序
function SnowdropNS() {
for (i = 0; i no; ++ i) { //依次處理每片雪花
updateSnow(); //下落
if ((x[i] = 1) || (x[i] = (doc_width - 20)) || (y[i] = (doc_height - 20))) { //如果超出屏幕范圍
makeSnow(); //則調整雪片到新位置上
doc_width = self.innerWidth; //更新頁面寬度數據
doc_height = self.innerHeight; //更新頁面高度數據
}
document.layers["dot"+i].top = y[i]; //改變層的Y坐標，應用新的位置
document.layers["dot"+i].left = x[i]; //改變層的X坐標，應用新的位置
}
setTimeout("SnowdropNS()", speed);
}
//在IE瀏覽器上處理雪片下落的主程序
function SnowdropIE() {
for (i = 0; i no; ++ i) { //依次處理每片雪花
updateSnow(); //下落
if ((x[i] = 1) || (x[i] = (doc_width - 20)) || (y[i] = (doc_height - 20))) { //如果超出屏幕范圍
makeSnow(); //則調整雪片到新位置上
doc_width = document.body.clientWidth; //更新頁面寬度數據
doc_height = document.body.clientHeight; //更新頁面高度數據
}
document.all["dot"+i].style.pixelTop = y[i]; //改變層的坐標，應用新的位置
document.all["dot"+i].style.pixelLeft = x[i];
}
setTimeout("SnowdropIE()", speed); //準備下一次下落過程。
}
if (ns4up) { //如果是NS
SnowdropNS(); //調用SnowdropNS使雪片下落
}
else
if (ie4up) { //如果是NS
SnowdropIE(); //調用SnowdropIE使雪片下落
}
--
/script
說明：可以根據自己的需求根據說明進行相應參數的修改
怎樣在自己的主頁上制造雪花飄的效果
可以通過 首頁上加flash把
wmod參數設為 transparent
或者直接用 script實現
以下是代碼
SCRIPT language=JavaScript1.2
//Configure below to change URL path to the snow image
var speed = 350; // the lower the number the faster the image moves
var snowsrc= new Array();
snowsrc[0] = "images/leave1.gif"
snowsrc[1] = "images/leave2.gif"
// snowsrc[2] = "images/leave2.gif"
// Configure below to change number of snow to render
var no = 6;
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0
for (i = 0; i no; ++i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("layer name="dot"+ i +"" left="15" top="15" visibility="show"img src=""+ snowsrc[j] + "" border="0"/layer");
} else {
document.write("layer name="dot"+ i +"" left="15" top="15" visibility="show"img src=""+ snowsrc[j] + "" border="0"/layer");
} } else if (ie4up) { if (i == 0)
{
document.write("div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;"img src="" + snowsrc[j] + "" border="0"/div");
} else {
document.write("div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;"img src="" + snowsrc[j] + "" border="0"/div");
}
}
if (j == (snowsrc.length-1)) { j = 0; } else { j += 1; }
}
function snowNS() { // Netscape main animation function
for (i = 0; i no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}
function snowIE() { // IE main animation function
for (i = 0; i no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", 10);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
/SCRIPT
把 snowsrc[0] = "images/leave1.gif"
snowsrc[1] = "images/leave2.gif"
// snowsrc[2] = "images/leave2.gif"
三個圖片換成你想要的雪花圖片就可以了
QQ空間歡迎動畫地址(要可以使用的)
裝扮空間——自定義——新建模塊
輸入新模塊名字，比如鼠標，背景等。提交。
然后出現新的對話框，把代碼寫入評論一欄，其他欄清空。提交。
完成后，保存。
1.qq空間皮膚背景代碼：QQ空間不用Q幣更換主頁皮膚方法
下面是更換QQ皮膚的新代碼（2005年11月29日測試可用）：
img src="javascript:document.getElementById('Mlogo').style.background='url(http://頂部一條圖片地址)';document.getElementById('all').style.background='url(http://背景圖片地址)';"
如果你不想改頂部圖片條的話只要這樣就夠了：
img src="javascript:document.getElementById('all').style.background='url(http://背景圖片地址)';"
設置頂部圖片條透明度：
img src="javascript:Mlogo.style.filter='alpha(opacity=30)';"
把30用0-100中喜歡的不透明度代替。100為不透明，0為完全看不見的透明。
我們只要把上面代碼中的兩處“圖片地址”，更改你自己喜歡的皮膚地址，就可以了，同樣代碼都是加到評論里，（提醒：代碼中有兩處地址，都要改， 那些代碼是要放在新建的模塊（當然，也可以在你原有的新建模塊里增加一個項目）里的評論里的（自定義－個性模塊-－新建模塊－板塊名稱－網頁對話筐－評論－（圖片欄和地址欄的http要刪除） －點個保存方式－保存－關于做出來得模塊，我們要隱藏它）
那么要怎么樣才知道皮膚的網絡地址呢？
首先 我們先進入：QQ個人空間—裝扮空間－皮膚－看到自己自己喜歡的皮膚點右鍵－屬性－可以看到皮膚地址（請注意那并不是放入皮膚代碼的皮膚網絡地址）
例如，網絡位置：
比如上圖－現在：我們右鍵點皮膚小圖片的，屬性，看地址那攔，對照一下和皮膚網絡位置的地址有什么區(qū)別，嘻嘻～看出來了吧，pre/2/50.gif和orig/2/50.gif不一樣哦，也就是說只要我們把裝扮空間里的皮膚地址里的pre—改為orig
例如： （商場裝扮空間里的皮膚展示的地址）
改為：（實際的皮膚圖片地址）
注意：由于騰訊QQ空間方面做了限制，通過以上方法得到的皮膚圖片地址如果直接用到代碼里面是無法顯示的。
免費的東西難道又沒得用了？有一個方法，如果我們把皮膚圖片文件下載下來，上傳到別的網頁空間再調出來，是可以顯示的。例如上面這個，上傳到本站，得到地址：，所以，代碼就是：
img src="javascript:document.getElementById('all').style.background='url()';"
你可以用以上方法下載了QQ空間里的圖片文件后上傳到免費的網頁空間去（例如論壇、博客等）得到圖片文件的地址。當然，你也可以用你在網頁上看到的任何圖片做皮膚，看到喜歡的圖片點右鍵－屬性－地址－復制，OK，HOHO，喜歡什么皮膚想換就換，很簡單吧～
2.QQ空間代碼之QQ空間導航代碼
什么是QQ空間導航？看右邊這個圖，就是“主頁”、“日志”這些東西，每個人的都一樣，是不是很沒有個性??？好的，就改改他。先看這個自定義字的導航代碼：
img src="javascript:bt_1.innerText='主 頁';bt_2.innerText='日記簿';bt_3.innerText='音樂廳';bt_4.innerText='留言簿';bt_5.innerText='相冊集';bt_6.innerText='過家家';bt_7.innerText='主人家';bt_8.innerText='誰踩我';"
這代碼里面的中文字可以隨便改，但是不要超過3個中文字，多了就不好看了。
是不是覺得文字的還不過癮，好，下面來看FLASH的。先來看全屏顯示的FLASH的代碼：
img src="javascript:document.getElementById('Mlogo').innerHTML+='div style='position:absolute;top:0;left:0;'EMBED src='地址' quality=high wmode='transparent' WIDTH='925' HEIGHT='655' TYPE='application/x-shockwave-flash'/div';"
這個代碼里“WIDTH='925' HEIGHT='655'”是FLASH的寬度和高度，可根據FLASH的大小和位置以及在QQ空間出現的地方調整，“'地址'”就是FLASH導航文件的地址，這個地址去那里找呢？網上有很多，我找了一個做示范，看這個地址：，那么代碼就是：
img src="javascript:document.getElementById('Mlogo').innerHTML+='div style='position:absolute;top:0;left:0;'EMBED src='' quality=high wmode='transparent' WIDTH='925' HEIGHT='655' TYPE='application/x-shockwave-flash'/div';"
上面的這個導航是放在右邊的，如果是放在上面的導航條，例如這個：，那 HEIGHT 選65就可以了，代碼為：
img src="javascript:document.getElementById('Mlogo').innerHTML+='div style='position:absolute;top:0;left:0;'EMBED src='' quality=high wmode='transparent' WIDTH='925' HEIGHT='65' TYPE='application/x-shockwave-flash'/div';"
如果你想將原來的導航條去掉，請看清除導航條代碼：
img src="javascript:bt_1.style.display='none';bt_2.style.display='none';bt_3.style.display='none';bt_4.style.display='none';bt_5.style.display='none';bt_6.style.display='none';bt_7.style.display='none';bt_8.style.display='none';" style="display:none;"
假如有人只想去掉其中一個或多個導航，可以這樣改，舉個例子：比如去掉迷你屋，按順序來排的話迷你屋的序號是6，所以，可以將代碼改成：
img src="javascript:bt_6.style.display='none'" style="display:none;"
如果你想將設置頂部圖片去掉，騰出空間放導航條，可用請看代碼：
img src="javascript:Mlogo.style.filter='alpha(opacity=0)';"
注意：去掉以后就看不到“自定義”三個字了，如果你想修改QQ空間的話，就朝大概的那個位置點移動鼠標，看見鼠標變成了可以點擊的圖案就可以了。不要告訴我你大概都不在哪里吧？
如果想重新顯示導航條和頂部圖片，將代碼刪除就可以了。
以下是筆者整理出來的QQ空間的部分FLASH導航條，歡迎大家選用：
使用方法：
在空間首頁選擇自定義，再點建立新模塊，然后把代碼寫在“評論”這一欄里，其他的可以全部不填。可以參考里QQ空間皮膚代碼里的使用說明，是一樣的。
3.QQ空間代碼之QQ空間透明Flash背景代碼
先來看全屏顯示的FLASH的代碼：
img src="javascript:document.getElementById('Mlogo').innerHTML+='div style='position:absolute;top:0;left:0;'EMBED src='地址' quality=high wmode='transparent' WIDTH='925' HEIGHT='655' TYPE='application/x-shockwave-flash'/div';"
WIDTH：透明FLASH寬度
HEIGHT：透明FLASH高度
top：透明FLASH與空間頂端的距離
left：透明FLASH與空間左端的距離
以上參數可根據FLASH的大小和位置以及在QQ空間出現的地方調整，不過要想全屏顯示的就話就用上面的參數就可以了。這個代碼里其實和QQ空間導航代碼里的是一樣的，只是用途不同，找到合適的FLASH地址就可以了。這個地址去那里找呢？網上有很多，我找了一個做示范，看這個地址：，那么代碼就是：
img src="javascript:document.getElementById('Mlogo').innerHTML+='div style='position:absolute;top:0;left:0;'EMBED src='' quality=high wmode='transparent' WIDTH='925' HEIGHT='655' TYPE='application/x-shockwave-flash'/div';"
以下是筆者整理出來的QQ空間的部分透明FLASH地址，就不介紹了，大家自己看，喜歡就拿去。
性感的唇
蒲公英
螞蟻
藍色的水
雪花飄
雪花飄
楓葉飄
黑客帝國
心
煙花
漂亮
跟著鼠標動的煙火
時間
火
跟著鼠標走的魚
眼鏡
下雨了
跟著鼠標的白色花
楓葉
使用方法：
在空間首頁選擇自定義，再點建立新模塊，然后把代碼寫在“評論”這一欄里，其他的可以全部不填?？梢詤⒖祭颭Q空間皮膚代碼里的使用說明，是一樣的
空間代碼使用步驟：
1、去掉不要的模塊：
“自定義”--“個性設置”--“模塊管理”點了之后有一個窗口出來，把不想顯示的模塊前的“√”去掉，然后“提交”，如果你想要原來的默認設置，這個步驟可以省略。
2、新建一個模塊：
“自定義”--“個性設置”--“新建模塊”點了之后有一個窗口出來，是給模塊起名字的，這個你自己想了，例如“代碼”。起好模塊名字，“提交”后就出另外一個窗口了。
3、填代碼：
在這個新出來的窗口里找到“評論”這個項，在里面填入以上代碼。（圖片欄和地址欄的http如果不需要可以刪除）
4、保存！
5、繼續(xù)填加代碼：
如果還有其他代碼填加，增加一個項目就可以了，點擊“＋”就可以繼續(xù)添加其他代碼。
6、修改或刪除代碼：
點擊“修改”或“刪除”就可以了。注意：有的代碼添加后再修改會出現無法加入的現象，建議刪除后再添加。
7、隱藏代碼模塊：
添加鼠標、掛件、導航的等這些代碼的模塊是不需要顯示的，怎么樣把它隱藏起來呢？有的網友在“模塊管理”里把它去掉了，這樣是看不見了，但是代碼的效果也沒有了。把它隱藏起來有兩個方法。
一個是把它放到邊上去，這樣就看不到了。在“自定義”模式下，用鼠標左鍵點這模塊不放，移動鼠標，把該模塊拖到邊上去?？从覉D，這是拖到右邊一半的效果，繼續(xù)往里面移動就可以了。
另一個方法是用其他大的模塊把這個小的模塊遮住，方法同上，移動到大模塊后面去就可以了。
如果隱藏了模塊后想修改又拖拉不出來，可以使用“還原默認”恢復，或者刪除這個模塊后再添加。
關于《手機網頁飄雪花》的介紹到此就結束了。