圣誕節馬上就要到了，作為一個程式員一定得給女朋友一個不一樣的驚喜（其實就是摳門），
哈哈，那么為她做一個專屬雪花特效怎么樣呢~我覺得很棒！
效果如下圖所示：
那么這么酷炫的操作是怎么完成的呢，其實很簡單，只需要html，一張背景圖和js就可以做到，
1、準備背景圖（可以用我的或者自己找一個更好的）
找好背景圖先創建一個資源檔案目錄static，然后將背景圖放進去，
2、撰寫html
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>下雪特效</title>
<script type="text/javascript" src="static/jquery-1.8.3.js"></script>
<script src="static/jq.js"></script>
<!--下面是呼叫方法和引數說明-->
<script>
$(function(){
$.fn.snow({
//Container:'.aixin',//這里是你想在哪個元素處出現雪花，這里可以是class也可以是id
minSize: 5, //雪花的最小尺寸
maxSize: 50, //雪花的最大尺寸
newOn: 30 //雪花出現的頻率 這個數值越小雪花越多
//content:<img src="./001_240.jpg" style="width:100%">,//這里是你想用的圖片，如果不寫這行代碼，則默認為雪花
//documentHeight :$(".aixin").height(),
//documentWidth :$(".aixin").width(),
//flakeColor : "#ff2727"
});
});
</script>
</head>
<body >
<div class="all" >
<!--<img src="./圣誕節.jpg" alt=""> -->
<div class = "word">Wish You Merry Christmas~</div>
</div>
</body>
<style>
.all{
display:flex;
justify-content:space-around;
text-align:center;
height:675px;
width:1200px;
background-image:url(static/圣誕節.jpg);
}
.word{
color:green;
text-align: center;
width: inherit;
height:inherit;
font-size: 50px;
position: absolute;/*設為絕對定位*/
}
</style>
</html>
3、撰寫js檔案，引入jquery庫檔案，將這兩個檔案也放入static檔案夾下，
撰寫js檔案：
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10, //雪花的最小尺寸
maxSize : 20, //雪花的最大尺寸
newOn : 1000, //雪花出現的頻率
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 - 100,
endPositionLeft = startPositionLeft - 100 + Math.random() * 100,
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);
jquery庫檔案可已經為大家提供好了，當然也可以自己去找：
鏈接：https://pan.baidu.com/s/1a6oAqm-nr8GuyX0vUFArig
提取碼：su9g
4、最后用瀏覽器打開html檔案即可，
這效果，那叫一個地道~ 等著女朋友對你深沉的愛吧（手動狗頭）~
不開玩笑了，雖然給女朋友用處不大，但是這個技識訓是值得掌握的~
喜歡的朋友歡迎點贊，評論，關注哦~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/389083.html
標籤：其他
上一篇：高薪程式員&面試題精講系列42之HashMap中如果出現沖突怎么解決？如何計算key的hash值、如何進行陣列索引定位？