这星期宁波有些地方已经开始下雪了,气温一下子降了很多,又快过年了。冬天最喜欢的就是下雪了,我想没有几个人不喜欢的,所以就从网络上到处收集有关雪花的特效,今天就来分享第一个JS雪花特效。这是个从淘宝网上拿下来的下雪特效,雪花从页面的顶部一直往下飘落,当你向下滚动页面时雪花又从当前页面的顶部开始下,而不是一直是从页面顶部落下来的。
js雪花特效代码
(function(){
function k(a,b,c){
if(a.addEventListener)
a.addEventListener(b,c,false);
else {
a.attachEvent&&a.attachEvent("on"+b,c)
}
}
function g(a){
if(typeof window.onload!="function"){
window.onload=a;
}else{
var b=window.onload;
window.onload=function(){
b();
a()
}
}
}
function h(){
var a={};
for(type in{Top:"",Left:""}){
var b=type=="Top"?"Y":"X";
if(typeof window["page"+b+"Offset"]!="undefined")
a[type.toLowerCase()]=window["page"+b+"Offset"];
else{
b=document.documentElement.clientHeight?document.documentElement:document.body;
a[type.toLowerCase()]=b["scroll"+type]
}
}
return a
}
function l(){
var a=document.body,b;
if(window.innerHeight)
b=window.innerHeight;
else if(a.parentElement.clientHeight)
b=a.parentElement.clientHeight;
else if(a&&a.clientHeight)
b=a.clientHeight;
return b
}
function i(a){
this.parent=document.body;
this.createEl(this.parent,a);
this.size=Math.random()*5+3;
this.el.style.width=Math.round(this.size)+"px";
this.el.style.height=Math.round(this.size)+"px";
this.maxLeft=document.body.offsetWidth-this.size;
this.maxTop=document.body.offsetHeight- this.size;
this.left=Math.random()*this.maxLeft;
this.top=h().top+1;
this.angle=1.4+0.2*Math.random();
this.minAngle=1.4;
this.maxAngle=1.6;
this.angleDelta=0.01*Math.random();
this.speed=2+Math.random()
}
var j=false;
g(function(){
j=true
});
var f=true;
window.createSnow=function(a,b){
if(j){
var c=[],m=setInterval(function(){
f&&b>c.length&&Math.random()<b*0.0025&&c.push(new i(a));
!f&&!c.length&&clearInterval(m);
for(var e=h().top,n=l(),d=c.length-1;d>=0;d--)
if(c[d])
if(c[d].top<e||c[d].top+c[d].size+1>e+n){
c[d].remove();
c[d]=null;
c.splice(d,1)
}else{
c[d].move();
c[d].draw()
}
},40);
k(window,"scroll",function(){
for(var e=c.length-1;e>=0;e--)
c[e].draw()
})
}else
g(function(){
createSnow(a,b)
})
};
window.removeSnow=function(){
f=false
};
i.prototype={
createEl:function(a,b){
this.el=document.createElement("img");
this.el.setAttribute("src","now.gif");
//this.el.setAttribute("class","fixpng");
this.el.style.position="absolute";
this.el.style.display="block";
this.el.style.zIndex="99";
//document.getElementById('snow').appendChild(this.el);
this.parent.appendChild(this.el)
},
move:function(){
if(this.angle< this.minAngle||this.angle>this.maxAngle)
this.angleDelta=-this.angleDelta;
this.angle+=this.angleDelta;
this.left+=this.speed*Math.cos(this.angle*Math.PI);
this.top-=this.speed*Math.sin(this.angle*Math.PI);
if(this.left<0)
this.left=this.maxLeft;
else if(this.left>this.maxLeft)
this.left=0
},
draw:function(){
this.el.style.top=Math.round(this.top)+"px";
this.el.style.left=Math.round(this.left)+"px"
},
remove:function(){
//document.getElementById('snow').removeChild(this.el);
//document.getElementById('snow').this.el=null;
this.parent.removeChild(this.el);
this.parent=this.el=null
}
}
})();
/**
* This function takes 2 arguments
* First is the path to the directory with snowflake images
* Second is the maximum number of snowflakes, please do not
* set this number above 60 as it will impact the performance
*/
createSnow('', 60);
直接复制上面的js代码就可以查看到效果,如果想了下载更多雪花特效可以访问 jsctrlc特效网 :http://www.jsctrlc.com/tags/雪花/
分享到:
相关推荐
基于springboot+Javaweb的二手图书交易系统源码数据库文档.zip
Linux课程设计.doc
课程考试资源描述 本资源是为应对各类课程考试而精心准备的综合性学习包。它包含了多门学科的考试指南、历年真题、模拟试题以及详细的答案解析。这些资源旨在帮助学生系统复习课程内容,理解考试要点,提高解题技巧,从而在考试中取得优异成绩。 资源中不仅包含了基础的考试资料,还特别加入了考试技巧讲解和备考策略分析。学生可以通过这些资源了解不同题型的解题方法和思路,学会如何在有限的时间内高效答题。此外,还有针对弱项科目和难点的专项训练,帮助学生攻克学习瓶颈。 为了确保资源的时效性和准确性,我们会定期更新考试资料和模拟试题,及时反映最新的考试动态和趋势。同时,也提供了在线交流平台,方便学生之间互相讨论、分享学习心得。 项目源码示例(简化版,Python) 以下是一个简单的Python脚本示例,用于生成包含选择题和答案的模拟试题: python import random # 定义选择题题库 questions = [ {"question": "Python的创始人是谁?", "options": ["A. 林纳斯·托瓦兹", "B. 巴纳姆", "C. 比尔·盖茨", "D.
基于 MySQL+Django 实现校园食堂点餐系统。 主要环境: PowerDesigner MySQL Workbench 8.0 CE Python 3.8 Django 3.2.8 BootStrap 3.3.7 Django-simpleui
基于SpringBoot的同城宠物照看系统源码数据库文档.zip
GEE训练教程
基于springboot+Web的心理健康交流系统源码数据库文档.zip
微信小程序 kotlin 实践微信插件助手, 目前支持抢红包(支持微信最新版本 7.0.0及7.0.3).zip
N32G45X运放电路检测电压
梦幻西游道人是梦幻西游里面的一个NPC,主要是刷全服最实惠的高级兽决和其他很好用的比较贵的东西,在长安城、傲来国、长寿村中的任意一个场景出现,一般会出现30分钟,不过东西一般都被秒刷。 梦幻西游道人出现时间解析如下: 1.梦幻西游道人出现时间一直都保持着一年出现两次的规律,即2、3月份的元宵节期间来一次,9月份的教师节期间出现一次。 2.云游道人每个整点(0:00至7:00不出现)会在长安城、傲来国、长寿村中的任意一个场景出现,每次出现后停留时间为30分钟。
tables-3.7.0-cp38-cp38-win_amd64.whl
基于springboot旧物回收管理系统源码数据库文档.zip
MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成为MySQL的代替品。在存储引擎方面,使用XtraDB(英语:XtraDB)来代替MySQL的InnoDB。 本文档介绍了MariaDB 10.1的集群部署,至少三台机器做成集群,每台可以同时提供读和写,感兴趣的小伙伴们可以参考一下
内容概要:本文档全面介绍了JavaScript作为一种轻量级的、解释型的语言及其在前端开发中的广泛应用。从JavaScript的基本概念出发,详尽讲解了基础语法(如变量、数据类型、运算符、流程控制)、函数和闭包、对象和原型、DOM操作(如获取、修改、添加和删除元素)、事件处理(如事件监听器、事件对象)、AJAX与Fetch API、ES6+的新特性(如箭头函数、模板字符串、解构赋值)以及前端框架和库(React、Vue、Angular)。除此之外,文章还涉及了代码优化技巧(如减少DOM操作、选择适当的算法和数据结构、使用工具提升代码性能),并对JavaScript的应用场景和发展趋势进行了展望。 适用人群:适用于初学者或具有少量编程经验的学习者,旨在帮助他们系统掌握JavaScript基础知识和前沿技术。 使用场景及目标:通过本教程的学习,读者不仅可以学会基本语法,还能理解并掌握高级概念和技术,如DOM操纵、事件处理机制、异步编程及最新的ECMAScript规范。这不仅有助于改善用户体验、增强网站互动性和响应速度,也能有效提升自身的编码水平和项目开发能力。 其他说明:此文档不仅涵盖了JavaScript的传统功能,还有现代前端技术和最佳实践指导,确保读者能够紧跟行业发展步伐,成为合格甚至优秀的Web开发人员。
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过严格测试运行成功才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。
基于springboot高考志愿智能推荐系统源码数据库文档.zip
经典-FPGA时序约束教程
mcu交互实验整体文件
Collins COBUILD (CN).mdx
自定义springboot starter