专栏首页沈唁志纯代码为网站站点添加雪花飘落效果

纯代码为网站站点添加雪花飘落效果

还有一周就是圣诞节了,现在出去街上基本上都有一些圣诞节的气氛

人在外地,一个人也不怎么出去,也就对圣诞节不怎么感冒,还是给博客搞搞气氛

前端滑稽上线~贴代码

<script type="text/javascript">
(function($){
   $.fn.snow = function(options){
   var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
   documentHeight     = $(document).height(),
   documentWidth  = $(document).width(),
   defaults = {
      minSize   : 10,
      maxSize   : 20,
      newOn     : 1000,
      flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
   },
   options = $.extend({}, defaults, options);
   var interval= setInterval( function(){
   var startPositionLeft = Math.random() * documentWidth - 100,
   startOpacity = 0.5 + Math.random(),
   sizeFlake = options.minSize + Math.random() * options.maxSize,
   endPositionTop = documentHeight - 200,
   endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
   durationFall = documentHeight * 10 + Math.random() * 5000;
   $flake.clone().appendTo('body').css({
      left: startPositionLeft,
      opacity: startOpacity,
      'font-size': sizeFlake,
      color: options.flakeColor
   }).animate({
      top: endPositionTop,
      left: endPositionLeft,
      opacity: 0.2
   },durationFall,'linear',function(){
        $(this).remove()
   });
   }, options.newOn);
    };
    })(jQuery);
$(function(){
    $.fn.snow({
       minSize: 5, /* 定义雪花最小尺寸 */
       maxSize: 50,/* 定义雪花最大尺寸 */
       newOn: 300  /* 定义密集程度,数字越小越密集 */
    });
});
</script>

代码放哪里就不用我说了吧,依赖 JQurey,如果没效果,请确认网页是否已载入 JQurey

之前也有一篇:WordPress博客网站下雪特效

两种代码都可以实现,自选,再分享一种简单的即时预览方法

很简单,在浏览器按下 F12,然后在 console 里面粘贴一下 JS 代码(不含前后的 script 标签),然后回车执行即可看到效果了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress添加随便看看

    沈唁
  • CMD命令一键查看连接过的WIFI密码信息

    沈唁
  • 微信小程序调用接口获取登录获取用户信息

    沈唁
  • js 实现下雪特效

    崔笑颜
  • JavaScript “袁华”飞雪特效

    马上就要到了传统节日“春节”?,网站添加了飞雪❄特效,从网上找了源代码,先要感谢张戈博客分享?,现计划将网站在今天上线至过年回来下线,看看可以么,你可以复制到自...

    Debug客栈
  • 使用Vue完成一个checklist

    这里封装了一个storage.js,用于保存数据至本地,这样下次打开页面还是会恢复至上次关闭的时候。

    zx钟
  • Win7下修改Hosts文件

    WIN7或者VISTAWIN7或者VISTA系统的需要提升用户对Hosts文件的操作权限,否则无效。 具体方法如下: 方法一:按着Shift键,然后Hosts文...

    跟着阿笨一起玩NET
  • 100篇泛癌研究文献解读之非编码区调控元件的突变情况

    为了分析不同类型、组织起源肿瘤的共性、差异以及新课题。TCGA于2012年10月26日-27日在圣克鲁兹,加州举行的会议中发起了泛癌计划。参考:https://...

    生信技能树
  • python: 序列化/反序列化及对象的深拷贝/浅拷贝

    一、序列化/反序列化 python中内置了很多序列化/反序列化的方式,最常用的有json、pickle、marshal这三种,示例用法如下: import js...

    菩提树下的杨过
  • Open Images冠军,商汤提出解偶检测分支新方法TSD并入选CVPR 2020

    由Google AI主办的Open Images大赛是目前通用物体检测和实例分割两个领域中数据量最大、数据分布最复杂、最有挑战性的竞赛。它比COCO数据大一个量...

    深度学习技术前沿公众号博主

扫码关注云+社区

领取腾讯云代金券