jQuery实现雪花飘落效果


Posted in jQuery onAugust 02, 2020

本文实例为大家分享了jQuery实现雪花飘落效果的具体代码,供大家参考,具体内容如下

效果展示:

jQuery实现雪花飘落效果

源码展示:

<!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 div = '<span class = "dd" style="' + style + '">' + num + '</span>'
      $('body').append(div)
      $('span').animate({
        top: maxH,
        left: bottom
      }, 3000, function() {
        $(this).remove() //这一步很关键,要把落下的去掉,不然会越积越多
      });
    }, 20) //20ms产生一个
  })
</script>
<pre style="color:red">
 感: 最近贡献一下我在教学中的小案例 
 希望能给你一些帮助 ,希望大家继续关注我的博客
 
                 --王
</pre>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

jQuery 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery实现滑动开关效果
Aug 02 #jQuery
jQuery实现开关灯效果
Aug 02 #jQuery
jquery轮播图插件使用方法详解
Jul 31 #jQuery
jQuery带控制按钮轮播图插件
Jul 31 #jQuery
jquery实现简单自动轮播图效果
Jul 29 #jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 #jQuery
jquery实现简单拖拽效果
Jul 20 #jQuery
You might like
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
express启用https使用小记
2019/05/21 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python生成器generator原理及用法解析
2020/07/20 Python
python zip()函数的使用示例
2020/09/23 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
求职简历自荐信
2013/10/20 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
2014年党小组工作总结
2014/12/20 职场文书
南京南京观后感
2015/06/02 职场文书
五年级数学教学反思
2016/02/16 职场文书