分享一个插件实现水珠自动下落效果


Posted in Javascript onJune 01, 2016

分享一个水珠自动下落的插件,下载地址:https://github.com/foreverjiangting/rainyday.js

下面来看看如何使用它?添加下面代码即可运行它。

实现效果如下:

分享一个插件实现水珠自动下落效果

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function runImage()
{
var image=document.getElementById("img");
image.src="4.jpg";
image.onload=function()
{
//设定一个rain对象
var engine=new RainyDay({image:this,}); //调用rain函数
engine.rain([[4,6,8000]]);//设定雨滴大小4,6 数量为8000 ||也可为 engine.rain([[6,8000]]),此时水珠的大小较小
engine.rain([[3,3,0.88],[5,5,0.9],[6,2,1]],100);//设定雨滴重复时间
}
// image.crossOrigin="jt"; 加载跨域图片 
}
</script>
</head>
<body onload="runImage();" >
<div class="rain">
<img src="4.jpg" id="img" alt="点击图片">
</div>
<script type="text/javascript" src="rainy.js"></script> 
</body>
</html>

下面来研究下rainy.js部分代码,源代码见上面的github里面的:

RainyDay.prototype.rain = function(presets, speed) {
// 准备canvas 进行下落映射
if (this.reflection !== this.REFLECTION_NONE) {
this.prepareReflections();
}
this.animateDrops();
// 动画
this.presets = presets;
this.PRIVATE_GRAVITY_FORCE_FACTOR_Y = (this.options.fps * 0.001) / 25;
this.PRIVATE_GRAVITY_FORCE_FACTOR_X = ((Math.PI / 2) - this.options.gravityAngle) * (this.options.fps * 0.001) / 50;
// 准备下落的模型
if (this.options.enableCollisions) {
// 计算最大的下落水珠圆角
var maxDropRadius = 0;
for (var i = 0; i < presets.length; i++) {
if (presets[i][0] + presets[i][1] > maxDropRadius) {
maxDropRadius = Math.floor(presets[i][0] + presets[i][1]);
}
}
if (maxDropRadius > 0) {
// 初始化下落的模型
var mwi = Math.ceil(this.canvas.width / maxDropRadius);
var mhi = Math.ceil(this.canvas.height / maxDropRadius);
this.matrix = new CollisionMatrix(mwi, mhi, maxDropRadius);
} else {
this.options.enableCollisions = false;
}
}
for (var i = 0; i < presets.length; i++) {
if (!presets[i][3]) {
presets[i][3] = -1;
}
}
var lastExecutionTime = 0;
this.addDropCallback = function() {
var timestamp = new Date().getTime();
if (timestamp - lastExecutionTime < speed) {
return;
}
lastExecutionTime = timestamp;
var context = this.canvas.getContext('2d');
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
context.drawImage(this.background, 0, 0, this.canvas.width, this.canvas.height);
// 选择匹配的模型
var preset;
for (var i = 0; i < presets.length; i++) {
if (presets[i][2] > 1 || presets[i][3] === -1) {
if (presets[i][3] !== 0) {
presets[i][3]--;
for (var y = 0; y < presets[i][2]; ++y) {
this.putDrop(new Drop(this, Math.random() * this.canvas.width, Math.random() * this.canvas.height, presets[i][0], presets[i][1]));
}
}
} else if (Math.random() < presets[i][2]) {
preset = presets[i];
break;
}
}
if (preset) {
this.putDrop(new Drop(this, Math.random() * this.canvas.width, Math.random() * this.canvas.height, preset[0], preset[1]));
}
context.save();
context.globalAlpha = this.opacity;
context.drawImage(this.glass, 0, 0, this.canvas.width, this.canvas.height);
context.restore();
}
.bind(this);
};

这里我想提到关于跨域资源的问题,image.crossOrigin="jt"; 加载跨域图片。刚开始我用的是跨域的图片,但出现问题了,然后我就使用本地的图片加载,即 src="4.jpg" ,就没问题了。其实如果你要使用跨域的图片,只要加上image.crossOrigin="jt"; 这句代码就可以了。

(前提是服务器开了允许的权限)

这里涉及到CORS的问题,我们来看下: CORS全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器

发出xmlhttprequest请求从而克服了AJAX只能同源使用的限制。

我们还用上面的列子来看问题:

<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function runImage()
{
var image=document.getElementById("img");
image.onload=function()
{
//设定一个rain对象
var engine=new RainyDay({image:this,});
engine.rain([[4,6,8000]]);//设定雨滴大小4,6 数量为8000
engine.rain([[3,3,0.88],[5,5,0.9],[6,2,1]],100);//设定雨滴重复时间
}
// image.crossOrigin="jt"; //跨域图片
image.src="http://img0.imgtn.bdimg.com/it/u=938096994,3074232342&fm=21&gp=0.jpg"; 
}
</script>
</head>
<body onload="runImage();" >
<div class="rain">
<img src="http://img0.imgtn.bdimg.com/it/u=938096994,3074232342&fm=21&gp=0.jpg" id="img" alt="点击图片">
</div>
<script type="text/javascript" src="rainy.js"></script>
</body>
</html>

我们来看下调试控制台里面的信息:

Accept 
image/png,image/*;q=0.8,*/*;q=0.5
Accept-Encoding 
gzip, deflate
Accept-Language 
zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3
Connection 
keep-alive
Host 
img0.imgtn.bdimg.com
Origin null ---上面的头信息中,Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值决定是否同意这次请求.不在许可范围内。服务器会返回一个正常的HTTP回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段(详见下文),就知道出错了,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。注意,这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200。 GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0. User-Agent 
Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0

如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。

以上内容是小编给大家分享的一个插件实现水珠自动下落效果 ,希望大家喜欢!

Javascript 相关文章推荐
解析jquery获取父窗口的元素
Jun 26 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
15个值得收藏的JavaScript函数
Sep 15 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 Javascript
js匿名函数作为函数参数详解
Jun 01 #Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 #Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 #Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 #Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 #Javascript
JS未跨域操作iframe里的DOM
Jun 01 #Javascript
jQuery实现的简单分页示例
Jun 01 #Javascript
You might like
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
js选项卡的实现方法
2015/02/09 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python实现简单银行管理系统
2019/10/25 Python
Python 去除字符串中指定字符串
2020/03/05 Python
python实现手势识别的示例(入门)
2020/04/15 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
小学安全教育材料
2014/02/17 职场文书
我的梦想演讲稿
2014/04/30 职场文书
公司户外活动总结
2014/07/04 职场文书
关于运动会的广播稿
2014/09/22 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
党员活动总结
2015/02/04 职场文书
甲午风云观后感
2015/06/02 职场文书
党支部鉴定意见
2015/06/02 职场文书
感恩老师主题班会
2015/08/12 职场文书
学生会部长竞选稿
2015/11/19 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
git中cherry-pick命令的使用教程
2022/06/25 Servers