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

tengxunyun cera

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

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

前端滑稽上线~贴代码

<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

cera aliyun tengxunyun cloudiplc

相关推荐

纯代码给你的网站增加图片灯箱效果|增强落地页体验

灯箱效果是我一直想加又没有加的功能,正好最近百度在推移动落地页检测,顺手做一下优化 我的检测结果是:您的页面可能存在图片不可全屏查看,全屏查看后不可缩放/左右滑动的问题,影响落地页体验 我们可以直接使用FancyBox来完成我们的需求,FancyBox是一款优秀的弹出框Jquery插件 1、允许我们用鼠标和键盘上的四个方向键切换图片 2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时,将会看到弹出框自动缩放 3、支持缩略图列表、放大、全屏等功能 4、弹出框支持显示多种类型的内容:图片、html、视频… 5、支持触控、缩放手势操作图片 实现加入 FancyBox 灯箱效果教程 1、引入相关文件 可以将FancyBox的 js、css 文件下载到主题目录中进行引入,这里我们直接使用 CDN 外链 请先在header.php文件的标签前引入Jquery文件 <script type=’text/javascript’ src=”https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js”></script> 如果存在就跳过(大部分应该都有),然后在footer.php文件的标签前引入FancyBox的 js、css 文件 <link rel=”stylesheet” href=”https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css” /> <script type=”text/javascript” src=”https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js”></script> 2、增加 data-fancybox 属性 这里分为两种情况,一种为之前插入图片的时候,添加过<a>标签 即:【添加多媒体】→【上传图片或媒体库】→选中图片→点击【插入至文章】之前,选择【附件显示设置】链接到【媒体文件】 需要将以下代码添加到当前主题的functions.php文件中 // fancybox3 图片添加 data-fancybox 属性 add_filter(‘the_content’, ‘fancybox’); function fancybox ($content){ global $post; $pattern = “/<a(.*?)href=(‘|\”)([^>]*).(bmp|gif|jpeg|jpg|png|swf)(‘|\”)(.*?)>(.*?)<\/a>/i”; $replacement = ‘<a$1href=$2$3.$4$5 data-fancybox=”images”$6>$7</a>’; $content …

Centos7 添加|删除|设置Swap交换分区

本文转自:https://www.yunloc.com/ Linux 系统的Swap 分区,即交换分区,通常也称为虚拟内存,Swap 空间的作用可简单描述为:当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当前运行的程序使用。那些被释放的空间可能来自一些很长时间没有什么操作的程序,这些被释放的空间被临时保存到 Swap 空间中,等到那些程序要运行时,再从 Swap 中恢复保存的数据到内存中。这样,系统总是在物理内存不够时,才进行 Swap 交换。其实,Swap 的调整对 Linux 服务器,特别是 Web 服务器的性能至关重要。通过调整 Swap,有时可以越过系统性能瓶颈,节省系统升级费用。   设置交换分区(swap) 以CentOS7 为例,其它 Linux 系统方法也差不多,先用 dd 命令创建一个 1024M 的分区 dd if=/dev/zero of=/swap bs=1M count=1024 然后进行格式化 mkswap /swap 启用虚拟内存 swapon /swap 设置开机启动需要修改/etc/fstab 文件,增加如下一行 /swap none swap default 0 0 或者直接执行命令 echo “/swap none swap default 0 0” >> …

纯代码为WordPress站点添加倒计时功能

久伴觉得这个教程很实用,特别是发布某些活动,是活动肯定有截止日期,所以博客在发布活动类型的文章底部添加一个活动结束倒计时还是不错的-本文来源:boke112导航 纯代码添加倒计时到 WordPress 1、把下面的代码保存为 countdownjs.js,保存在当前所使用主题的 js/目录里: function getAdd(time){ if(time<10){ return “0”+time; }else{ return time; } } var interval = 1000; function ShowCountDown(year,month,day,hourd,minuted){ var now = new Date(); var endDate = new Date(year, month–1, day, hourd, minuted); var leftTime = endDate.getTime() – now.getTime(); var leftsecond = parseInt(leftTime/1000); var day = Math.floor(leftsecond/(60*60*24)); day = day < 0 ? …

WordPress 为评论添加星级评分功能|支持自定义文章类型

有些时候,我们需要为WordPress自带的评论功能添加一个星级评分功能,倡萌之前推荐过 Fa Comment Rating,今天再补充两个不错的插件。 Stars Rating 一个简单易用的插件,可为文章、页面和自定义文章类型的评论添加星级评分功能。允许设置哪些文章类型启用该功能,还可以为单个文章、页面等启用/禁用星级评分功能。并提供简码 [stars_rating_avg] 来显示平均评分。 Stars Rating下载地址:https://wordpress.org/plugins/stars-rating/ Reviews Plus 一个免费的WordPress插件,允许管理和显示客户对产品、服务或任何其他文章类型内容的评论。可以为任何WordPress页面、文章或自定义文章类型的评论启用星级评分功能。比上面的插件更好的地方,就是它可以为每一种启用了该功能的文章类型添加一个单独的评论管理界面,并且可以替换掉 WooCommerce 自带的点评功能。

微信扫一扫,分享到朋友圈

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