jQuery雪花飄落效果程式碼例項

antzone發表於2017-04-18
jQuery

分享一段程式碼例項，它實現了雪花隨機飄落效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
body {
  background-color: #000;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
var minSize = 5; 
var maxSize = 50;
var newOn = 300;
var flake = $("<div></div>").css("position", "absolute").html("❉"); 
 
$(function() {
  setInterval(function() {
    var wWidth = $(document).width();
    var wHight = $(document).height();
    var startLeft = Math.random() * wWidth;
    var endLeft = Math.random() * wWidth;
    var flakeSize = minSize + maxSize * Math.random();
    var flakeOpacity = 0.7 + Math.random() * 0.3;
    var flakeEndOpacity = 0.5 + Math.random() * 0.3;
    var durationTime = 3000 * Math.random() + 10 * wHight;
    flake.clone().appendTo($("body")).css({
      "left": startLeft,
      "font-size": flakeSize,
      "opacity": flakeOpacity,
      "color": "#FFF",
      "top": "-55px"
    }).animate({
      "left": endLeft,
      "opacity": flakeEndOpacity,
      "top": wHight
    }, durationTime, function() {
      $(this).remove();
    });
  }, newOn);
})
</script>
</head>
<body>
</body>
</html>

上面的程式碼實現了雪花飄落效果，雪花的生成也有點投機取巧。

這裡主要是考察的jquery的幾個方法和隨機定位功能，總體非常簡單，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.css()方法可以參閱jQuery css()一章節。

（2）.Math.random()可以參閱javascript Math.random()一章節。

（3）.clone()可以參閱jQuery clone()一章節。

（4）.appendTo()可以參閱jQuery appendTo()一章節。

（5）.animate()可以參閱jQuery animate()一章節。

相關文章