前言
这一讲，给大家添加登录页面
实现
添加Login的Index视图
@{
Layout = null;
}
<!DOCTYPE html>
<html class="loginHtml">
<head>
<meta charset="utf-8">
<title>登录--BYCMS后台管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="~/Content/images/favicon.ico">
<link rel="stylesheet" href="~/Content/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="~/Content/css/public.css" media="all" />
</head>
<body class="loginBody">
<iframe src="/Login/Bg01" style=" 100%;height: 100%" frameborder="0"></iframe>
<form class="layui-form">
<div class="login_face"><img src="~/Content/images/face.jpg" class="userAvatar"></div>
<div class="layui-form-item input-item">
<label for="userName">用户名</label>
<input type="text" placeholder="请输入用户名" autocomplete="off" id="userName" class="layui-input" lay-verify="required">
</div>
<div class="layui-form-item input-item">
<label for="password">密码</label>
<input type="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input" lay-verify="required">
</div>
<div class="layui-form-item input-item" id="imgCode">
<label for="code">验证码</label>
<input type="text" placeholder="请输入验证码" autocomplete="off" id="code" class="layui-input">
<img src="~/Content/images/code.jpg">
</div>
<div class="layui-form-item">
<button class="layui-btn layui-block" lay-filter="login" lay-submit>登录</button>
</div>
</form>
<script type="text/javascript" src="~/Content/layui/layui.js"></script>
<script type="text/javascript" src="~/Content/js/login/login.js"></script>
<script type="text/javascript" src="~/Content/js/cache.js"></script>
</body>
</html>
添加Login的Bg01视图
@{
Layout = null;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bg01</title>
<style>
body {
margin: 0;
padding: 0;
background: black;
overflow: hidden;
}
</style>
<script src="http://cdn.bootcss.com/three.js/r78/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
</head>
<body>
<script>
var isMouseDown = false;
var emptySlot = "emptySlot", planeTop = "planeTop", planeBottom = "planeBottom";
var camera, scene, renderer;
var mouse = { x: 0, y: 0 };
var camPos = { x: 0, y: 0, z: 10 };
var sw = window.innerWidth, sh = window.innerHeight;
var cols = 20;
var rows = 16;
var gap = 20;
var size = {
100,
height: 30,
depth: 150,
}
var planeOffset = 250;
var allRowsDepth = rows * (size.depth + gap);
var allColsWidth = cols * (size.depth + gap);
var speedNormal = 4;
var speedFast = 34;
var speed = speedNormal;
var boxes = {
planeBottom: [],
planeTop: []
};
var boxes1d = [];
function num(min, max) { return Math.random() * (max - min) + min; }
function draw(props) {
var colours = {
slow: {
r: num(0, 0.2),
g: num(0.5, 0.9),
b: num(0.3, 0.7)
},
fast: {
r: num(0.9, 1.0),
g: num(0.1, 0.7),
b: num(0.2, 0.5)
}
}
var uniforms = {
r: { type: "f", value: colours.slow.r },
g: { type: "f", value: colours.slow.g },
b: { type: "f", value: colours.slow.b },
distanceX: { type: "f", value: 1.0 },
distanceZ: { type: "f", value: 1.0 },
pulse: { type: "f", value: 0 },
speed: { type: "f", value: speed },
};
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: fragmentShader
});
var geometry = new THREE.BoxGeometry(props.width, props.height, props.depth);
var object = new THREE.Mesh(geometry, material);
object.colours = colours;
return object;
}
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(100, sw / sh, 1, 10000);
scene.add(camera);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(sw, sh);
for (var j = 0, jl = rows; j < jl; j++) {
boxes.planeBottom[j] = [];
boxes.planeTop[j] = [];
for (var i = 0, il = cols; i < il; i++) {
boxes.planeBottom[j][i] = emptySlot;
boxes.planeTop[j][i] = emptySlot;
};
};
function createBox() {
var xi = Math.floor(Math.random() * cols),
xai = xi;
var yi = Math.random() > 0.5 ? 1 : -1,
yai = yi === -1 ? planeBottom : planeTop;
var zi = Math.floor(Math.random() * rows),
zai = zi;
var x = (xi - cols / 2) * (size.width + gap);
var y = yi * planeOffset;
var z = zi * (size.depth + gap);
if (boxes[yai][zai][xai] === emptySlot) {
var box = draw(size);
box.position.y = y;
box.isWarping = false;
box.offset = {
x: x,
z: 0
};
box.posZ = z;
boxes[yai][zai][xai] = box;
boxes1d.push(box);
scene.add(box)
}
var dzurl = window.location.href.substr(0, 19);
var dzurl2 = window.location.href.substr(0, 4);
}
for (var i = 0, il = rows * cols; i < il; i++) {
createBox();
};
document.body.appendChild(renderer.domElement);
function listen(eventNames, callback) {
for (var i = 0; i < eventNames.length; i++) {
window.addEventListener(eventNames[i], callback);
}
}
listen(["resize"], function (e) {
sw = window.innerWidth;
sh = window.innerHeight
camera.aspect = sw / sh;
camera.updateProjectionMatrix();
renderer.setSize(sw, sh);
});
listen(["mousedown", "touchstart"], function (e) {
e.preventDefault();
isMouseDown = true;
});
listen(["mousemove", "touchmove"], function (e) {
e.preventDefault();
if (e.changedTouches && e.changedTouches[0]) e = e.changedTouches[0];
mouse.x = (e.clientX / sw) * 2 - 1;
mouse.y = -(e.clientY / sh) * 2 + 1;
});
listen(["mouseup", "touchend"], function (e) {
e.preventDefault();
isMouseDown = false;
});
render(0);
}
function move(x, y, z) {
var box = boxes[y][z][x];
if (box !== emptySlot) {
box.position.x = box.offset.x;
box.position.z = box.offset.z + box.posZ;
if (box.position.z > 0) {
box.posZ -= allRowsDepth;
}
// return;
// if (isMouseDown) return;
if (!box.isWarping && Math.random() > 0.999) {
var dir = Math.floor(Math.random() * 5), xn = x, zn = z, yn = y, yi = 0, xo = 0, zo = 0;
switch (dir) {
case 0: xn++; xo = 1; break;
case 1: xn--; xo = -1; break;
case 2: zn++; zo = 1; break;
case 3: zn--; zo = -1; break;
case 4:
yn = (y === planeTop) ? planeBottom : planeTop;
yi = (y === planeTop) ? -1 : 1;
break;
}
if (boxes[yn][zn] && boxes[yn][zn][xn] === emptySlot) {
boxes[y][z][x] = emptySlot;
box.isWarping = true;
boxes[yn][zn][xn] = box;
// con.log( box.offset.x, box.offset.z);
if (dir === 4) { // slide vertically
TweenMax.to(box.position, 0.5, {
y: yi * planeOffset
});
} else { // slide horizontally
TweenMax.to(box.offset, 0.5, {
x: box.offset.x + xo * (size.width + gap),
z: box.offset.z + zo * (size.depth + gap),
});
}
TweenMax.to(box.offset, 0.6, {
onComplete: function () {
box.isWarping = false;
}
});
}
}
}
}
function render(time) {
speed -= (speed - (isMouseDown ? speedFast : speedNormal)) * 0.05;
var box;
for (var b = 0, bl = boxes1d.length; b < bl; b++) {
box = boxes1d[b];
box.posZ += speed;
// normalized z distance from camera
var distanceZ = 1 - ((allRowsDepth - box.posZ) / (allRowsDepth) - 1);
box.material.uniforms.distanceZ.value = distanceZ;
// normalized x distance from camera (centre)
var distanceX = 1 - (Math.abs(box.position.x)) / (allColsWidth / 3);
box.material.uniforms.distanceX.value = distanceX;
var colour = isMouseDown ? box.colours.fast : box.colours.slow;
box.material.uniforms.r.value -= (box.material.uniforms.r.value - colour.r) * 0.1;
box.material.uniforms.g.value -= (box.material.uniforms.g.value - colour.g) * 0.1;
box.material.uniforms.b.value -= (box.material.uniforms.b.value - colour.b) * 0.1;
// normalized speed
var currentSpeed = (speed - speedNormal) / (speedFast - speedNormal)
box.material.uniforms.speed.value = currentSpeed;
// pulses more with more speed... of course!
if (Math.random() > (0.99995 - currentSpeed * 0.005)) {
box.material.uniforms.pulse.value = 1;
}
box.material.uniforms.pulse.value -= box.material.uniforms.pulse.value * 0.1 / (currentSpeed + 1);
// if (b ==13) con.log(box.material.uniforms.speed.value);
}
for (var j = 0, jl = rows; j < jl; j++) { // iterate through rows: z
for (var i = 0, il = cols; i < il; i++) { // iterate throw cols: x
move(i, planeBottom, j);
move(i, planeTop, j);
};
};
camPos.x -= (camPos.x - mouse.x * 400) * 0.02;
camPos.y -= (camPos.y - mouse.y * 150) * 0.05;
camPos.z = -100;
camera.position.set(camPos.x, camPos.y, camPos.z);
// camera.lookAt( scene.position );
// camera.rotation.z = time * 0.0001;
camera.rotation.y = camPos.x / -1000;
camera.rotation.x = camPos.y / 1000;
// camera.rotation.z = camPos.x / -2000;
camera.rotation.z = (camPos.x - mouse.x * 400) / 2000;
renderer.render(scene, camera);
// if (time < 800)
requestAnimationFrame(render);
}
var vertexShader = [
"varying vec2 vUv;",
"void main()",
"{",
" vUv = uv;",
" vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
" gl_Position = projectionMatrix * mvPosition;",
"}"].join("");
var fragmentShader = [
"uniform float r;",
"uniform float g;",
"uniform float b;",
"uniform float distanceZ;",
"uniform float distanceX;",
"uniform float pulse;",
"uniform float speed;",
"varying vec2 vUv;",
// "float checkerRows = 8.0;",
// "float checkerCols = 16.0;",
"void main( void ) {",
" vec2 position = abs(-1.0 + 2.0 * vUv);",
" float edging = abs((pow(position.y, 5.0) + pow(position.x, 5.0)) / 2.0);",
" float perc = (0.2 * pow(speed + 1.0, 2.0) + edging * 0.8) * distanceZ * distanceX;",
// " float perc = distanceX * distanceZ;",
// " vec2 checkPosition = vUv;",
// " float checkerX = ceil(mod(checkPosition.x, 1.0 / checkerCols) - 1.0 / checkerCols / 2.0);",
// " float checkerY = ceil(mod(checkPosition.y, 1.0 / checkerRows) - 1.0 / checkerRows / 2.0);",
// " float checker = ceil(checkerX * checkerY);",
// " float r = checker;",
// " float g = checker;",
// " float b = checker;",
// " float perc = 1.0;",
" float red = r * perc + pulse;",
" float green = g * perc + pulse;",
" float blue = b * perc + pulse;",
" gl_FragColor = vec4(red, green, blue, 1.0);",
"}"].join("");
//console.log(THREE, TweenMax, planeTop, planeBottom);
init();
</script>
</body>
</html>
运行效果图
