jQuery雪花飘落效果代码实例

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了雪花随机飘落效果。

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()一章节。

jQuery雪花飘落效果代码实例,这样的场景在实际项目中还是用的比较多的,关于jQuery雪花飘落效果代码实例就介绍到这了。

jQuery雪花飘落效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容