ホームページ > 記事 > ウェブフロントエンド > jqueryが空を舞う雪の結晶とクリスマスの祝福スノーフレークエフェクトのコード共有を実現_jquery
jqueryが空を舞う雪の結晶とクリスマスの祝福スノーフレークエフェクトのコード共有を実現_jquery
- WBOYオリジナル
- 2016-05-16 15:43:571583ブラウズ
これは、空一面に舞う雪の結晶を実装するための jquery ベースのクリスマスの祝福の雪の結晶エフェクト コードです。雪の結晶のサイズを切り替えることができ、背景画像も変更できます。非常に実用的なスライドショーです。エフェクトのソースコード。
空に雪片が飛んでいる jquery クリスマスの祝福スノーフレーク効果。クリックしてさまざまな効果を選択できます。お楽しみください。
効果のデモンストレーション ソース コードのダウンロード (ブラウザで正しく動作しない場合は、閲覧モードを切り替えてみるか、直接ダウンロードすることを選択してください)
空を舞う雪片の jquery クリスマス祝福スノーフレーク エフェクト コードは次のとおりです
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="images/jquery-latest.min.js"></script>
<script src='images/snowfall.jquery.js'></script>
<link rel="stylesheet" href="images/styles.css"></link>
</head>
<body class="darkBg">
<input type="button" id="clear" value="Click to clear"/>
<input type="button" id="round" value="Rounded"/>
<input type="button" id="shadows" value="Shadows"/>
<input type="button" id="roundshadows" value="Rounded Shadows"/>
<input type="button" id="deviceorientation" value="Deviceorientation"/>
<div class="collectonme">
<p>Collect on meeeeee!!!</p>
</div>
<div class="collectonme">
<p>Collect on meeeeee!!!</p>
</div>
<div class="collectonme">
<p>Collect on meeeeee!!!</p>
</div>
</body>
<script type='text/javascript'>
$(document).ready(function(){
$('.collectonme').hide();
//Start the snow default options you can also make it snow in certain elements, etc.
$(document).snowfall();
$("#clear").click(function(){
$(document).snowfall('clear'); // How you clear
});
$("#round").click(function(){
document.body.className = "darkBg";
$('.collectonme').hide();
$(document).snowfall('clear');
$(document).snowfall({round : true, minSize: 5, maxSize:8}); // add rounded
});
$("#shadows").click(function(){
document.body.className = "lightBg";
$('.collectonme').hide();
$(document).snowfall('clear');
$(document).snowfall({shadow : true, flakeCount:200}); // add shadows
});
$("#roundshadows").click(function(){
document.body.className = "lightBg";
$('.collectonme').hide();
$(document).snowfall('clear');
$(document).snowfall({shadow : true, round : true, minSize: 5, maxSize:8}); // add shadows
});
$("#deviceorientation").click(function(){
$(document).snowfall('clear');
$('.collectonme').hide();
document.body.className = "darkBg";
$(document).snowfall({deviceorientation : true, round : true, minSize: 5, maxSize:8});
});
});
</script>
<p align="center"><font color="#FFFFFF">来源：</font><a href="http://www.jb51.net/" target="_blank"><font color="#FFFFFF">脚本之家</font></a></p>
</html>
上記は、飛んでいる雪片の jquery クリスマス祝福スノーフレーク エフェクト コードです。気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。