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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery实现动态向上滚动
Dec 21 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
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Vue.js实战之组件的进阶
2017/04/04 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
Python 制作糗事百科爬虫实例
2016/09/22 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
电子工程求职信
2014/07/17 职场文书
师德师风的心得体会
2014/09/02 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
终止合同协议书范本
2016/03/22 职场文书
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技