让你的博客飘雪花超出屏幕依然看得见


Posted in Javascript onJanuary 04, 2013

前些天,在园子里看到了使你的博客飘雪花的文章,就赶紧弄到自己的博客里来看看效果,别说,还真是漂亮啊。可是看了一会,就发现页面变得特别卡。

看了下代码后发现,原作者是在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'});
Javascript 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
Angular的$http与$location
Dec 26 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
JavaScript 巧学巧用
May 23 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 #Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 #Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 #Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 #Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 #Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 #Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 #Javascript
You might like
浅析PHP的ASCII码转换类
2013/07/05 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
超级强大的表单验证
2006/06/26 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
javascript 写类方式之六
2009/07/05 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
js module大战
2019/04/19 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python中如何获取类属性的列表
2016/12/26 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
用Python进行websocket接口测试
2020/10/16 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
优秀团员个人总结
2015/02/26 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL