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


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 相关文章推荐
js 函数的副作用分析
Aug 23 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 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 高手之路(二)
2006/10/09 PHP
discuz安全提问算法
2007/06/06 PHP
php绘制一个矩形的方法
2015/01/24 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
php命令行模式代码实例详解
2021/02/26 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python解析yaml文件过程详解
2019/08/30 Python
Python列表操作方法详解
2020/02/09 Python
python退出循环的方法
2020/06/18 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
市场营销专业推荐信
2013/11/03 职场文书
12岁生日演讲稿
2014/05/14 职场文书
森林防火标语
2014/06/23 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
给朋友的赠语
2015/06/23 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS
nginx静态资源的服务器配置方法
2022/07/07 Servers