我想应用简单的 javascript rainydrop 效果,http://maroslaw.github.io/rainyday.js/demo2.html
但是这不起作用。我得到了非常意想不到的结果,如下图所示。
我认为问题出在 Assets 管道上?但我没有任何想法
这是布局 joseph_memo.html.haml
!!!
%html{lang: "en"}
%head
%meta{charset: "utf-8"}/
%title rainyday.js demo #4
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
%style{media: "screen"}
:cdata
img { display: none; }
body { overflow: hidden; }
\#canvas { position: absolute; top: 0; left: 0; }
%script{src: asset_path("rainyday/dist/rainyday.0.1.1.min.js"), type: "text/javascript"}
:javascript
function run() {
var engine = new RainyDay('canvas', 'background', window.innerWidth, window.innerHeight);
engine.gravity = engine.GRAVITY_NON_LINEAR;
engine.trail = engine.TRAIL_DROPS;
engine.VARIABLE_GRAVITY_ANGLE = Math.PI / 8;
engine.rain([
engine.preset(0, 2, 0.5),
engine.preset(4, 4, 1)
], 50);
}
%body{onload: "run();"}
%img#background{alt: "background", src: asset_path("rainyday/img/city.jpg")}/
#cholder
%canvas#canvas
最佳答案
布局
该问题可能是由于您将 javascript 直接包含在您的 application
布局中造成的。
您正在使用 anonymous function (因在 Rails 上无法正常工作而臭名昭著),然后绑定(bind)到主体的 on-load
事件。使用 [unobtrusive] javascript 2 会更好并将代码放入您的 /app/assets/javascripts/application.js
文件中:
#app/assets/javascripts/application.js
//require rainyday/dist/rainyday.0.1.1.min.js
var make_it_rain = function() {
var engine = new RainyDay('canvas', 'background', window.innerWidth, window.innerHeight);
engine.gravity = engine.GRAVITY_NON_LINEAR;
engine.trail = engine.TRAIL_DROPS;
engine.VARIABLE_GRAVITY_ANGLE = Math.PI / 8;
engine.rain([
engine.preset(0, 2, 0.5),
engine.preset(4, 4, 1)
], 50);
};
$(document).on("page:load ready", make_it_rain);
如果您的 rain
插件正常工作,这应该能让事情正常工作。我会更详细地介绍如何更好地构建您的应用程序,但这对于我认为的另一个答案会更好
关于javascript - 无法在rails上应用js效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25102135/