添加 Falling Snow 下雪特效到您的網頁

添加下雪特效到您的網頁。

首先，你得選好一個您希望出現在您的網頁上的雪花或任何圖像。接下來，添加下面的JavaScript代碼到您的網頁的body內。在lookandfeel.com，你可以自己可以查找到一些很酷的雪花。 Try it out and see what you can do.

View our flash photo gallery with falling snow and a mp3 player.

<script language="JavaScript1.2">
/*
Snow Effect Script
Created and submitted by Altan d.o.o. (snow@altan.hr, http://www.altan.hr/snow/index.html)
Permission granted to Dynamicdrive.com to feature script in archive
For full source code and installation instructions to this script, visit http://dynamicdrive.com
*/


//Configure below to change URL path to the snow image
var snowsrc="snow.gif"
// Configure below to change number of snow to render
var no = 10;


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();


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\"><a href=\"http://dynamicdrive.com/\"><img src='"+snowsrc+"' border=\"0\"></a></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' 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;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"></a></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"></div>");
}
}
}


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>

如果你的圖片檔案名稱不是snow.gif，記得修改掉喔！

Let It Snow! 讓你的部落格飄著雪花

再過幾天聖誕節、新年就要到了，如果你也想應景一下在WordPress部落格加裝個飄雪的特效，可以用下面介紹的這個「Let It Snow!」飄雪外掛。它的使用方法很簡單，下載回來、解壓縮之後，再將「let-it-snow」資料夾上傳到你的WP網站的「/wp-content/plugins」資料夾裡，並到後台啟用此外掛即可。（太冷的話，請再把外掛停用即可）

▇ 軟體小檔案 ▇

軟體名稱：Let It Snow!
軟體版本：1.3
軟體語言：英文
軟體性質：免費（WordPress外掛）
檔案大小：10.9KB
系統支援：WordPress 架站系統 1.5以上版本
官方網站：按這裡
軟體下載：按這裡
注意事項：此外掛是給使用WordPress系統自行架站的人用的，其他網站系統或無名小站、痞客邦…等網站並不支援。


注意！如果你的佈景主題無法正常使用此下雪外掛，請在佈景主題的「header.php」檔案中的「</head>」標籤上方加入「<? wp_head(); ?>」即可。

轉貼自：重灌狂人  http://briian.com/?p=5975

網頁素材 jQuery 選單特效-分享2U

利用 jQuery 滑動圖片的效果，加上CSS改變圖片的位置，製作出選單mosue over的特效。

使用說明：
解壓縮檔案後，打開 jQuery.htm，即可看到選單特效。
可依自己的喜好修改 bg.jpg、bg2.jpg、bg3.jpg、bg4.jpg 這4張圖的顏色。
注意：圖片檔名要取一樣，不然會找不到圖檔。

>>>>>分享下載<<<<<

jQuery資料表格插件-flexigrid-分享2U

Flexigrid是一個類似Ext Gird，但基於jQuery開發的Grid。它具有的功能包括：可以調整列寬，合併列標題，分頁，排序，顯示/隱藏表格等。Flexigrid顯示的數據能够通過Ajax或取或者從一個普通的表格轉換。



Flexigrid  官方網站 (英文)

載點:
http://code.google.com/p/flexigrid/downloads/detail?name=flexigrid.zip

一個漂亮的jquery上傳插件-分享2U

漂亮的jquery上傳插件，可以多文件上傳。有進度條顯示。

檔案大小：107.6 KB

>>>>>分享下載<<<<< 

網頁圖片輪播特效套件- jQuery Plugin Cycle

易於擴充是一個優秀架構不可或缺的特性，jQuery自然也提供了方便的擴充之道--jQuery Plugin。
簡單來說，要引用 jQuery Plugin的步驟非常簡單，只需加一行<script type="text/javascript" src="plug_name.js"></script>引用Plugin程式檔，$("...")就多了新的Method可用。

【Cycle】
輪播效果Plugin，可以做出投影片放映或廣告輪播般的效果。
有洗牌、放大、淡出、下翻、翻面、捲動等效果，很適合做照片或廣告的輪播展示。
載入jquery.cycle.js後，只要在網頁中用<div>或其他容器元素將多個<img>包起來，接著$("#myDiv").cycle("shuffle")就大功告成，如以下範例:

網頁圖片藝廊特效套件- Riding carousels with jQuery

這個jQuery插件可以生成一個水平或垂直的列表，並且允許你控制DIV層的滑動顯示。



官方網站：
http://sorgalla.com/jcarousel/

載點:
http://sorgalla.com/projects/download-zip.php?jcarousel

範例:
☆水平左右
http://sorgalla.com/projects/jcarousel/examples/static_simple.html
☆垂直上下
http://sorgalla.com/projects/jcarousel/examples/static_vertical.html
☆三張ㄧ起捲
http://sorgalla.com/projects/jcarousel/examples/static_circular.html
☆兩秒自動切換、最後ㄧ張捲回
http://sorgalla.com/projects/jcarousel/examples/static_auto.html
☆最前、最後ㄧ張按鈕鎖住
http://sorgalla.com/projects/jcarousel/examples/static_callbacks.html
☆頁碼、下拉式選擇
http://sorgalla.com/projects/jcarousel/examples/static_controls.html
☆按鈕樣式
http://sorgalla.com/projects/jcarousel/examples/static_multiple.html


本文轉載自：台灣分享2U論壇  http://freeshare2u.com/viewthread.php?tid=8172

介紹 jQuery Tools 與 jQuery UI 這兩套好用的 jQuery 套件

我想家喻戶曉的 jQuery UI 套件應該不用特別介紹了，但我最近又看到一套不錯的 jQuery Tools 套件，相較於知名且多功能的 jQuery UI 套件，jQuery Tools 提供一種額外的選擇，他只提供幾種網站上最常用的功能，包括 Tabs、Tooltips、Expose、Overlay、Scrollable、Flashembed 等，其中的 Flashembed 就可以取代我們之前常用的 swfobject 套件，他還支援 SIFR 功能喔。光聽我說還不夠，最好立即看看線上展示，你就知道有哪些酷炫實用的效果了。

整個套件在透過 gzip 壓縮過僅 5.8KB 除了下載快，JavaScript 的執行速度也號稱相當快，而且還提供 CDN (Content Delivery Network)
<script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>

tip網頁特效jQuery收集

http://codylindley.com/blogstuff/js/jtip/

http://visionwidget.com/inspiration/web/495-jquery-tooltip-plugins.html

http://plugins.learningjquery.com/cluetip/demo/

http://pupunzi.com/#mb.components/mb.gallery/gallery.html


分享給大家

圖片切換jQuery插件收集

CrossSlide這個jQuery插件包含不少常用的Javascript幻燈片放映效果，例如：動態移動、縮放、淡入淡出漸變、滑入滑出...等。
http://tobia.github.com/CrossSlide/

jQuery Cycle Plugin是一個slideshow插件。包含多種變換效果：shuffle、zoom、fade、turnDown、curtainX、scrollRight。
http://www.malsup.com/jquery/cycle/

jQuery.SerialScroll是一個用來創建滾動效果的jQuery插件，包含水平/垂直方向滾動和混合滾動效果。
http://flesler.blogspot.com/2008/02/jqueryserialscroll.html