由于背景代码是传统的JQuery插件,不符合AMD规范,需要使用到配置参数“shim”进行配置。在RequireJS的官网(https://requirejs.org/docs/api.html#config)上有如下描述:
大意即是说,shim:为不使用define()声明依赖关系和设置模块值的较旧的传统“浏览器全局变量”脚本配置依赖关系,导出和自定义初始化。
项目目录结构如下:
(有横线的是文件夹,没横线的是文件夹里的文件)
F:\···\SRC\MAIN\RESOURCES\STATIC\JS
│ index.js
│ reg.js
│ ···
│
├─lib
│ │ crypto-js.js
│ │ jquery-3.4.1.min.js
│ │ require.js
│ │ zxcvbn.js
│ │
│ └─ckeditor
│ ckeditor.js
│ zh-cn.js
│
└─utils
canva_moving_effect.js
encrypt.js
iconfont.js
utils.js
于是在JS中关于背景JQuery插件的用法如下:
<body>
<!-- bg effect -->
<div id="bg">
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
</div>
<!-- //bg effect -->
<script type="text/javascript" data-main="js/index" src="js/lib/require.js" charset="utf-8"></script>
</body>
require.config({
baseUrl: 'js',
paths: {
jquery: 'lib/jquery-3.4.1.min',
background: 'utils/canva_moving_effect'
},
shim: {
'background': ['jquery'],
}
});
require(['jquery', 'background'], function ($){
//…JQuery代码
});
在浏览器的控制台可以看到背景JQuery插件成功加载:
由上图可知,背景JQuery插件通过RequireJS成功加载,成功完成背景效果的加载。
背景插件源码如下:
//对滚动缓存功能进行设置
//页面加载的时候添加一个定时器,0秒之后执行hideURLbar函数。hideURLbar函数将页面滚动至坐标(0,1)。
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
//具体背景效果实现
(function($){
var canvas = $('#bg').children('canvas'),
background = canvas[0],
foreground1 = canvas[1],
foreground2 = canvas[2],
config = {
circle: {
amount: 18,
layer: 3,
color: [157, 97, 207],
alpha: 0.3
},
line: {
amount: 12,
layer: 3,
color: [255, 255, 255],
alpha: 0.3
},
speed: 0.5,
angle: 20
};
if (background.getContext){
var bctx = background.getContext('2d'),
fctx1 = foreground1.getContext('2d'),
fctx2 = foreground2.getContext('2d'),
M = window.Math, // Cached Math
degree = config.angle/360*M.PI*2,
circles = [],
lines = [],
wWidth, wHeight, timer;
requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(callback, element) { setTimeout(callback, 1000 / 60); };
cancelAnimationFrame = window.cancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.msCancelAnimationFrame ||
window.oCancelAnimationFrame ||
clearTimeout;
var setCanvasHeight = function(){
wWidth = $(window).width();
wHeight = $(window).height(),
canvas.each(function(){
this.width = wWidth;
this.height = wHeight;
});
};
var drawCircle = function(x, y, radius, color, alpha){
var gradient = fctx1.createRadialGradient(x, y, radius, x, y, 0);
gradient.addColorStop(0, 'rgba('+color[0]+','+color[1]+','+color[2]+','+alpha+')');
gradient.addColorStop(1, 'rgba('+color[0]+','+color[1]+','+color[2]+','+(alpha-0.1)+')');
fctx1.beginPath();
fctx1.arc(x, y, radius, 0, M.PI*2, true);
fctx1.fillStyle = gradient;
fctx1.fill();
};
var drawLine = function(x, y, width, color, alpha){
var endX = x+M.sin(degree)*width,
endY = y-M.cos(degree)*width,
gradient = fctx2.createLinearGradient(x, y, endX, endY);
gradient.addColorStop(0, 'rgba('+color[0]+','+color[1]+','+color[2]+','+alpha+')');
gradient.addColorStop(1, 'rgba('+color[0]+','+color[1]+','+color[2]+','+(alpha-0.1)+')');
fctx2.beginPath();
fctx2.moveTo(x, y);
fctx2.lineTo(endX, endY);
fctx2.lineWidth = 3;
fctx2.lineCap = 'round';
fctx2.strokeStyle = gradient;
fctx2.stroke();
};
var drawBack = function(){
bctx.clearRect(0, 0, wWidth, wHeight);
var gradient = [];
gradient[0] = bctx.createRadialGradient(wWidth*0.3, wHeight*0.1, 0, wWidth*0.3, wHeight*0.1, wWidth*0.9);
gradient[0].addColorStop(0, 'rgb(0, 26, 77)');
gradient[0].addColorStop(1, 'transparent');
bctx.translate(wWidth, 0);
bctx.scale(-1,1);
bctx.beginPath();
bctx.fillStyle = gradient[0];
bctx.fillRect(0, 0, wWidth, wHeight);
gradient[1] = bctx.createRadialGradient(wWidth*0.1, wHeight*0.1, 0, wWidth*0.3, wHeight*0.1, wWidth);
gradient[1].addColorStop(0, 'rgb(0, 150, 240)');
gradient[1].addColorStop(0.8, 'transparent');
bctx.translate(wWidth, 0);
bctx.scale(-1,1);
bctx.beginPath();
bctx.fillStyle = gradient[1];
bctx.fillRect(0, 0, wWidth, wHeight);
gradient[2] = bctx.createRadialGradient(wWidth*0.1, wHeight*0.5, 0, wWidth*0.1, wHeight*0.5, wWidth*0.5);
gradient[2].addColorStop(0, 'rgb(40, 20, 105)');
gradient[2].addColorStop(1, 'transparent');
bctx.beginPath();
bctx.fillStyle = gradient[2];
bctx.fillRect(0, 0, wWidth, wHeight);
};
var animate = function(){
var sin = M.sin(degree),
cos = M.cos(degree);
if (config.circle.amount > 0 && config.circle.layer > 0){
fctx1.clearRect(0, 0, wWidth, wHeight);
for (var i=0, len = circles.length; i<len; i++){
var item = circles[i],
x = item.x,
y = item.y,
radius = item.radius,
speed = item.speed;
if (x > wWidth + radius){
x = -radius;
} else if (x < -radius){
x = wWidth + radius
} else {
x += sin*speed;
}
if (y > wHeight + radius){
y = -radius;
} else if (y < -radius){
y = wHeight + radius;
} else {
y -= cos*speed;
}
item.x = x;
item.y = y;
drawCircle(x, y, radius, item.color, item.alpha);
}
}
if (config.line.amount > 0 && config.line.layer > 0){
fctx2.clearRect(0, 0, wWidth, wHeight);
for (var j=0, len = lines.length; j<len; j++){
var item = lines[j],
x = item.x,
y = item.y,
width = item.width,
speed = item.speed;
if (x > wWidth + width * sin){
x = -width * sin;
} else if (x < -width * sin){
x = wWidth + width * sin;
} else {
x += sin*speed;
}
if (y > wHeight + width * cos){
y = -width * cos;
} else if (y < -width * cos){
y = wHeight + width * cos;
} else {
y -= cos*speed;
}
item.x = x;
item.y = y;
drawLine(x, y, width, item.color, item.alpha);
}
}
timer = requestAnimationFrame(animate);
};
var createItem = function(){
circles = [];
lines = [];
if (config.circle.amount > 0 && config.circle.layer > 0){
for (var i=0; i<config.circle.amount/config.circle.layer; i++){
for (var j=0; j<config.circle.layer; j++){
circles.push({
x: M.random() * wWidth,
y: M.random() * wHeight,
radius: M.random()*(20+j*5)+(20+j*5),
color: config.circle.color,
alpha: M.random()*0.2+(config.circle.alpha-j*0.1),
speed: config.speed*(1+j*0.5)
});
}
}
}
if (config.line.amount > 0 && config.line.layer > 0){
for (var m=0; m<config.line.amount/config.line.layer; m++){
for (var n=0; n<config.line.layer; n++){
lines.push({
x: M.random() * wWidth,
y: M.random() * wHeight,
width: M.random()*(20+n*5)+(20+n*5),
color: config.line.color,
alpha: M.random()*0.2+(config.line.alpha-n*0.1),
speed: config.speed*(1+n*0.5)
});
}
}
}
cancelAnimationFrame(timer);
timer = requestAnimationFrame(animate);
drawBack();
};
$(document).ready(function(){
setCanvasHeight();
createItem();
});
$(window).resize(function(){
setCanvasHeight();
createItem();
});
}
})(jQuery);
背景插件源码文件:
链接:https://pan.baidu.com/s/1Ghx_ZZeTurMwVZLnHBwAfg
提取码:h5lg