Jquery中文網 www.twdanq.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 圣誕節Merry Christmas給博客添加浪漫的下雪效果基于jquery實現

圣誕節Merry Christmas給博客添加浪漫的下雪效果基于jquery實現

發布時間:2013-10-18   編輯:www.twdanq.live
一年一度的圣誕節又到了,首先祝大家好運一串串,健康一年年,平安到永遠!今天就教大家如何在博客中添加紛紛揚揚的下雪效果。今天,你那里下雪了嗎
一年一度的圣誕節又到了,首先祝大家好運一串串,健康一年年,平安到永遠!在這個特殊的日子里,處處洋溢著節日的氣氛,空中飄落的雪花更顯得浪漫!今天就教大家如何在博客中添加紛紛揚揚的下雪效果。今天,你那里下雪了嗎?

首先在頁面引入 jquery 庫和 jQuery.snow.js(或者使用壓縮版本 jQuery.snow.min.js):
復制代碼 代碼如下:

<script src="jquery.js"></script>
<script src="jquery.snow.js"></script>

博客園的朋友可以不用引入 jQuery,因為博客園自身已經引入了。不是博客園的朋友也可以引用 Goolgle CDN 提供的 jQuery:
復制代碼 代碼如下:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="jquery.snow.js"></script>

然后在頁面文檔的任何地方調用下雪插件就可以了:
復制代碼 代碼如下:

<script>
$(document).ready( function(){
$.fn.snow();
});
</script>

你也可以根據自己的喜好設置插件提供的參數來調整下雪的效果:
復制代碼 代碼如下:

minSize /* 雪花的最小尺寸,默認值 10 */
maxSize /* 雪花的最小尺寸,默認值 20 */
newOn /* 每毫秒雪花出現的頻率,默認是 500 */
flakeColor /* 雪花的顏色,默認值是白色 #FFFFFF */

例如可以傳遞下面這樣形式的參數:
復制代碼 代碼如下:

$.fn.snow({
minSize: 5,
maxSize: 50,
newOn: 1000,
flakeColor: '#0099FF'
});

newOn 參數值越小,效果越好,但是設置過小的話可能會有性能問題,比較耗資源。

最后向大家簡單介紹一下這個下雪效果實現的要點:
使用字符 ❄ 作為雪花,Unicode 編碼是:❄,因此雪花的大小和顏色控制其實就是設置 font-size 和 color 屬性。
使用 setInterval 周期性生成雪花,頻率使用 newOn 控制。

下面是下雪插件的完整代碼:
復制代碼 代碼如下:

(function($){
$.fn.snow = function(options){
var $flake = $('<div id="flake" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 500,
flakeColor : "#FFFFFF"
},
options = $.extend({}, defaults, options);
var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake
.clone()
.appendTo('body')
.css(
{
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}
)
.animate(
{
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},
durationFall,
'linear',
function() {
$(this).remove()
}
);
}, options.newOn);
};
})(jQuery);

園子里的朋友只要把下面代碼添加到(管理-》設置-》頁腳HTML代碼)中就可以了,非簡單!

溫馨提示:因為會被轉義,這里給雪花編碼加個空格,使用的時候記得把html('& #10052;') 的& #間空格去掉啊。
復制代碼 代碼如下:

<script>
(function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('& #10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);
$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#FFF' });
</script>

您可能感興趣的文章:
讓你的博客飄雪花超出屏幕依然看得見
圣誕節Merry Christmas給博客添加浪漫的下雪效果基于jquery實現
簡單易用的基于jQuery版仿新浪微博向下滾動效果(附DEMO)
分享幾個超級震憾的圖片特效
網站優化之百度外鏈變化異常的分析方法
批處理概念與方法
仿新浪微博返回頂部的jquery實現代碼
jquery實現textarea輸入字符控制(仿微博輸入控制字符)
Jquery實現仿新浪微博獲取文本框能輸入的字數代碼
基于jQuery的彈出警告對話框美化插件(警告,確認和提示)

關鍵詞: 圣誕節  下雪效果   
[關閉]
广西快乐10分怎样开奖号码