让你的博客飘雪花超出屏幕依然看得见
前些天，在园子里看到了使你的博客飘雪花的文章，就赶紧弄到自己的博客里来看看效果，别说，还真是漂亮啊。可是看了一会，就发现页面变得特别卡。
看了下代码后发现，原作者是在body中不停的插入多个小div雪花来向下慢慢飘，一直飘到body的底部后，将雪花移除。
但是，实际上，超出屏幕的页面我们又看不见，就算有雪花在飘又有什么意义呢。
于是，将原来的代码稍加修改，让他只是从屏幕的顶部飘落到屏幕底部（不是body的底部）后，就将雪花移除，另外将雪花改为fixed定位。
将页面刷新下，果然好多了。现把修改代码贴出来与大家分享。
PS.原作者链接我没找到，版权归原作者所有：）
代码如下:
(function($){
$.fn.snow=function(options){
var $flake=$('<div />')
.css({
'position':'fixed',//'absolute',
'top':'-50px',
'z-index':'1000'
})
.html('❄');
var documentHeight=document.documentElement.clientHeight;//$(document).height();
var documentWidth=$(document).width();
var defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"};
var options=$.extend({},defaults,options);
var interval=setInterval(function(){
var startPositionLeft=Math.random()*documentWidth-100;
var startOpacity=0.5+Math.random();
var sizeFlake=options.minSize+Math.random()*options.maxSize;
var endPositionTop=documentHeight-40;
var endPositionLeft=startPositionLeft-100+Math.random()*200;
var 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);//interval End
};//$.fn.snow End
})(jQuery);
$.fn.snow({ minSize: 10, maxSize: 60, newOn: 800, flakeColor: '#ccc'});
相关推荐
-
Android实现粒子雨效果
本文实例介绍了Android实现粒子雨效果的实现过程,分享给大家供大家参考,具体内容如下 先看看效果图: 具体实现方法: 1.baseview主要是设定雨滴要实现的动作,只是先设定,也就是抽象方法,在子类中实现其方法 2.Rainitems封装雨滴类 3.Rainitems对雨滴集合创建到面板中,显示出来,具体实现就是在这个类中 一.baseview封装类,子类继承后实现方法即可 public abstract class BaseView extends View { private cont
-
用js代码和插件实现wordpress雪花飘落效果的四种方法
冬天到了,很多的博客空间都加了雪花的效果,于是去看了看他们的效果实现.有好几个效果代码,就拿过来了,有需要的朋友可以拿过去试试看. 雪花大图片: 效果代码一 <script type="text/javascript" language="javascript"> (function() { function k(a, b, c) { if (a.addEventListener) a.addEventListener(b, c, false); els
-
PHP生成带有雪花背景的验证码
<?php session_start(); session_register("login_check_number"); //昨晚看到了chianren上的验证码效果,就考虑了一下,用PHP的GD库完成了类似功能 //先成生背景,再把生成的验证码放上去 $img_height=120; //先定义图片的长.宽 $img_width=40; if($HTTP_GET_VARS["act"]== "init"){ //srand(micro
-
使用js实现雪花飘落效果
今天用html5绘布加js写的雪花飘效果 .分享下: 复制代码 代码如下: <html> <head> <script> function start(){ var array=new Array(); var canvas=document.getElementById("mycanvas"); var context=canvas.getContext("2d"); for(var i=0;i<50;i++){ var
-
Qt 实现桌面雪花飘落代码
代码很简单, 贴个主要的实现过程吧. 理应支持windows和linux桌面版的, 但是linux下就暂时不测试了. 懒得重启. 有空测试一下. 系统资源消耗: 我在1.65GHz 双核CPU, 4G RAM, 32bit Win7 下, 19M左右的内存消耗, 6%-7%左右的CPU消耗.全部源码在后面的链接. 复制代码 代码如下: #include "widget.h"#include "ui_widget.h"#include <QDesktopWidg
-
java分形绘制科赫雪花曲线(科赫曲线)代码分享
首先我们举个例子:我们可以看到西兰花一小簇是整个花簇的一个分支,而在不同尺度下它们具有自相似的外形.换句话说,较小的分支通过放大适当的比例后可以得到一个与整体几乎完全一致的花簇.因此我们可以说西兰花簇是一个分形的实例.分形一般有以下特质:在任意小的尺度上都能有精细的结构: 太不规则,以至难以用传统欧氏几何的语言描述: (至少是大略或任意地)自相似豪斯多夫维数会大於拓扑维数: 有著简单的递归定义.(i)分形集都具有任意小尺度下的比例细节,或者说它具有精细的结构.(ii)分形集不能用传统的几何语言来
-
Android营造雪花和雨滴浪漫效果
本文在实现雪花效果的基础上,根据漫天飞舞雪花,实现下雨天场景的效果,使用eclipse android 版本,具体内容如下 雪花效果图: 具体代码: 1.漫天飞舞的雪花主要代码 SnowView <span style="font-size:14px;">package com.ex</span>ample.snowflake.view; import android.content.Context; import android.graphics.Canvas
-
让你的博客飘雪花超出屏幕依然看得见
前些天,在园子里看到了使你的博客飘雪花的文章,就赶紧弄到自己的博客里来看看效果,别说,还真是漂亮啊.可是看了一会,就发现页面变得特别卡. 看了下代码后发现,原作者是在body中不停的插入多个小div雪花来向下慢慢飘,一直飘到body的底部后,将雪花移除. 但是,实际上,超出屏幕的页面我们又看不见,就算有雪花在飘又有什么意义呢. 于是,将原来的代码稍加修改,让他只是从屏幕的顶部飘落到屏幕底部(不是body的底部)后,就将雪花移除,另外将雪花改为fixed定位. 将页面刷新下,果然好多了.现把修改代
-
Flask入门教程实例：搭建一个静态博客
现在流行的静态博客/网站生成工具有很多,比如 Jekyll, Pelican, Middleman, Hyde 等等,StaticGen 列出了目前最流行的一些静态网站生成工具. 我们的内部工具由 Python/Flask/MongoDB 搭建,现在需要加上文档功能,写作格式是 Markdown,不想把文档放到数据库里,也不想再弄一套静态博客工具来管理文档,于是找到了 Flask-FlatPages 这个好用的 Flask 模块.熟悉 Flask 的同学花几分钟的时间就可以用搭建一个简单博客,加
-
PHP仿博客园 个人博客（2） 数据库增添改删
废话不多说了,上一篇有个核心概念就是 give action do something ! 这篇我就用代码来解释这个概念是啥意思,先看我的 post.class.php . 这个文件是我们的数据层处理类. 简单介绍一下这个model 类,它继承了一个数据库基类来做crud 等常用操作, 每次初始化时就会初始化一个数据库对象 $db. 我们就用这个对象来操作我们的数据.对于数据操作有2个重要方法 storePostFormValues( ) , storeDiaryFormValues( ),它们
-
利用正则表达式抓取博客园列表数据
鉴于我在要完成的asp.net MVC 3 仿照博客园企业系统要用到测试数据,我自己输入太累,所以我就抓取了博客园的部分列表数据,还请dudu不要见怪. 在抓取博客园数据的时候采用了正则表达式,所以有不熟悉正则表达式的朋友可以参考相关资料,其实很容易掌握,就是在具体的实例中会花些时间. 现在我就来把我抓取博客园数据的过程叙述一下,如果有朋友有更好的意见,欢迎提出来. 要使用正则表达式抓取数据,首先就要创建一个正则表达式进行匹配,我推荐使用regulator,这个正则表达式工具,我们可以先使用这个
-
Python 爬虫爬取指定博客的所有文章
自上一篇文章 Z Story : Using Django with GAE Python 后台抓取多个网站的页面全文 后,大体的进度如下: 1.增加了Cron: 用来告诉程序每隔30分钟 让一个task 醒来, 跑到指定的那几个博客上去爬取最新的更新 2.用google 的 Datastore 来存贮每次爬虫爬下来的内容..只存贮新的内容.. 就像上次说的那样,这样以来 性能有了大幅度的提高: 原来的每次请求后, 爬虫才被唤醒 所以要花大约17秒的时间才能从后台输出到前台而现在只需要2秒不到
-
新浪博客在线编辑器傻瓜调用版（2007.11.1第四次修正）提供下载了
前几天21EClub发布出新浪博客编辑器下载用了一下 感觉不错不过见很多朋友不知道怎么调用于是花了一晚上时间把编辑器修改了一下方便大家使用 1.添加时图片增加上传功能(ASP无组件上传)2.IFRAME方式调用 用法类似eWebEditor 调用方法:<input type="hidden" name="content" id="content"><iframe src="Edit/editor.htm?id=co
-
Python使用Django实现博客系统完整版
今天花了一些时间搭了一个博客系统,虽然并没有相关于界面的美化,但是发布是没问题的. 开发环境 操作系统:windows 7 64位 Django: 1.96 Python:2.7.11 IDE: PyCharm 2016.1 功能篇 既然是博客系统,发布的自然是博客了.让我们想想,一篇博客有什么属性.所以我们要有能添加博客,删除博客,修改博客,以及给博客发评论,贴标签,划分类等功能. 关系分析 属性 博客:标题,内容. 标签:标签名 分类:分类的名称 评论:评论人,评论人email,评论内容 关
-
利用Python Django实现简单博客系统
第一节 - 基础 1. 简单的导览图,学会不迷路 对 Django 的评价:借用李清照的<鹧鸪天 桂花>来表达, 暗淡轻黄体性柔.情疏迹远只香留.何须浅碧深红色,自是花中第一流. 梅定妒,菊应羞.画阑开处冠中秋.骚人可煞无情思,何事当年不见收. Django makes it easier to build better Web apps more quickly and with less code. 容易上手,开发速度快 囊括了网站开发中的用户管理,内容管理,网站地图,RSS等常用的插件
-
使用Python+Flask开发博客项目并实现内网穿透
目录 前言 1.个人的注册与登录模块 2.首页文章展示模块 3.文章详情展示模块 4.文章发布模块 5.文章添加分类模块 6.文章分类管理模块 7.文章管理模块 8.用户个人信息注销模块 9.信息管理模块 10.程序启动模块 11.内网穿透模块 12.总结 前言 Flask是一个使用python编写的轻量级Web框架,对比其他相同类型的框架而言,这个框架更加的灵活轻便.并且具有很强的定制性,用户可以根据自己的需求添加功能,有强大的插件库,这也是为什么这个框架在python领域一直火热的原因.这篇
-
Docker实现从零开始搭建SOLO个人博客的方法步骤
目录 一.环境准备 二.安装Docker 三.安装mysql主从数据库 3.1.mysql环境准备 3.2.启动mysql主库从库 3.3.登陆mysql主库 3.4.登陆mysql从库 3.5.主从参数说明 四.搭建solo博客 五.Nginx实现反向代理solo博客 六.成果展示 一.环境准备 要想在公网访问你的博客,首先你需要一台云服务器,也就是租用各大云厂商的服务器,像我就是花68块买了一年青云的1核2G的服务器,你现在看到的博客就是在这台服务器上,最好也购买一个专属的域名.一年十几就够