首頁 > web前端 > js教程 > 主體

聖誕節Merry Christmas為部落格添加浪漫的下雪效果基於jquery實現_jquery

WBOY
發布: 2016-05-16 17:45:21
原創
1337 人瀏覽過

一年一度的聖誕節又到了,首先祝大家好運一串串,健康一年年,平安到永遠!在這個特別的日子裡,處處洋溢著節慶的氣氛,空中飄落的雪花更顯得浪漫!今天就教大家如何在部落格中加入紛紛揚揚的下雪效果。今天,你那裡下雪了嗎?

首先在頁面引入jQuery 庫和jQuery.snow.js(或使用壓縮版本jQuery.snow.min.js):

複製程式碼 程式碼如下:




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




然後在頁面文件的任何地方調用下雪插件就可以了:
複製程式碼 程式碼如下:

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

你也可以依照自己的喜好設定外掛提供的參數來調整下雪的效果:
複製程式碼 程式碼如下:

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

例如可以傳遞下面這樣形式的參數:
複製程式碼 程式碼如下:

$.fn.snow ({
minSize: 5,
maxSize: 50,
newOn: 1000,
flakeColor: '#0099FF'
});
On 參數值越小,效果越好,但是設定過小的話可能會有效能問題,比較耗資源。


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


以下是下雪插件的完整程式碼:
複製程式碼複製程式碼

程式碼如下


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

園子裡的朋友只要把下面程式碼加入(管理-》設定-》頁腳HTML程式碼)就可以了,非簡單!

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

<script> <BR>(><BR> <BR><script> <BR>(unction($){function($){function($){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()*documentWidth-100,startOpacity=0.5 Math.random( ),sizeFlake=options.minSize Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100 Math.random()*200,durationFall=documentHeightLeft-100 Math.random()*200,durationFall=documentHeightLeft-105.$om* 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); </script>
$.fn.snow ({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#FFF' });
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!