Home > Article > Web Front-end > Realizing snowflake falling effect based on jQuery
The example in this article shares the specific code for jQuery to achieve the snowflake falling effect for your reference. The specific content is as follows
Effect display:
Source code display:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery实现雪花飘落</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> * { margin:0px; padding:0px; } body { position:relative; height:1000px; width:100%; overflow:hidden; background-color: #666; } span { display:block; opacity:0.7; } </style> </head> <body> <script> $(function() { setInterval(function() { var maxW = document.body.clientWidth, maxH = document.body.clientHeight, left = Math.random() * maxW, bottom = left - (Math.random() - 0.5) * 0.2 * maxW, //保证落下的位置水平有变化,但不大 opacity = 0.7 + 0.3 * Math.random(); speed = 30; size = 20 + 10 * Math.random(), //字体20-30 color = '#fff'; // num = Math.floor(Math.random() * 10) //产生0-9随机数,当然你们可以自己设置 num ='*'; var style = 'position:absolute;top:0px;font-size:' + size + 'px;color:' + color + ';left:' + left + 'px;opacity:' + opacity; var p = '<span class = "dd" style="' + style + '">' + num + '</span>' $('body').append(p) $('span').animate({ top: maxH, left: bottom }, 3000, function() { $(this).remove() //这一步很关键,要把落下的去掉,不然会越积越多 }); }, 20) //20ms产生一个 }) </script> <pre style="color:red"> 感: 最近贡献一下我在教学中的小案例 希望能给你一些帮助 ,希望大家继续关注我的博客 --王