login interface
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DengLu</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.content{
text-align: center;
min-height: calc(100vh - 100px);
}
footer {
height: 80px;
background-color: blue;
} /* Sliding control container, light gray background */
#dragContainer {
position: relative;
display: inline-block;
background: #e8e8e8;
width: 300px;
height: 50px;
border: 2px solid #e8e8e8;
}
/* The left part of the slider, green background */
#dragBg {
position: absolute;
background-color: #7ac23c;
width: 0px;
height: 100%;
}
/* Swipe validation container text */
#dragText {
position: absolute;
width: 100%;
height: 100%;
/* Center the text horizontally */
text-align: center;
/* The text is vertically centered, the percentage cannot be used here, because the percentage is relative to the original line-height, not the div height*/
line-height: 50px;
/* Text is not allowed to be selected */
user-select: none;
-webkit-user-select: none;
}
/* slider */
#dragHandler {
position: absolute;
width: 50px;
height: 100%;
cursor: move;
}
/* Slider initial background */
.dragHandlerBg {
background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==");
}
/* Slider background when authentication is successful */
.dragHandlerOkBg {
background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==");
}
.zhu{
color: blue;
}
.form-control{display:inline-block;}
</style>
<script>
window.onload = function() {
var dragContainer = document.getElementById("dragContainer");
var dragBg = document.getElementById("dragBg");
var dragText = document.getElementById ("dragText");
var dragHandler = document.getElementById ("dragHandler");
//slider maximum offset
var maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth;
//Whether the verification is successful mark
var isVertifySucc = false;
initDrag ();
function initDrag() {
dragText.textContent = "Drag slider validation";
dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);
dragHandler.addEventListener("touchstart", onDragHandlerMouseDown);
}
function onDragHandlerMouseDown(event) {
document.addEventListener("mousemove", onDragHandlerMouseMove);
document.addEventListener("mouseup", onDragHandlerMouseUp);
document.addEventListener("touchmove", onDragHandlerMouseMove);
document.addEventListener("touchend", onDragHandlerMouseUp);
}
function onDragHandlerMouseMove(event) {
/*
There is no width attribute on the html element, only clientWidth
offsetX is relative to the current element, clientX and pageX are relative to its parent element
touches: An array of touch objects representing the currently tracked touch operations.
targetTouches: An array of Touch objects specific to the event target.
changedTouches: An array of Touch objects representing what has changed since the last touch.
*/
var left = (event.clientX || event.changedTouches[0].clientX) - dragHandler.clientWidth / 2;
if(left < 0) {
left = 0;
} else if(left > maxHandlerOffset) {
left = maxHandlerOffset;
verifySucc();
}
dragHandler.style.left = left + "px";
dragBg.style.width = dragHandler.style.left;
}
function onDragHandlerMouseUp(event) {
document.removeEventListener("mousemove", onDragHandlerMouseMove);
document.removeEventListener("mouseup", onDragHandlerMouseUp);
document.removeEventListener("touchmove", onDragHandlerMouseMove);
document.removeEventListener("touchend", onDragHandlerMouseUp);
dragHandler.style.left = 0;
dragBg.style.width = 0;
}
//Verification succeeded
function verifySucc() {
isVertifySucc = true;
dragText.textContent = "Verification passed";
dragText.style.color = "white";
dragHandler.setAttribute("class", "dragHandlerOkBg");
dragHandler.removeEventListener("mousedown", onDragHandlerMouseDown);
document.removeEventListener("mousemove", onDragHandlerMouseMove);
document.removeEventListener("mouseup", onDragHandlerMouseUp);
dragHandler.removeEventListener("touchstart", onDragHandlerMouseDown);
document.removeEventListener("touchmove", onDragHandlerMouseMove);
document.removeEventListener("touchend", onDragHandlerMouseUp);
};
}
</script>
</head>
<body>
<main class="content">
<h1>Login</h1>
<input type="text" class="form-control" placeholder="mobile/email/username" style="width: 30%;">
<br> <br>
<input type="password" class="form-control" placeholder="密码" style="width: 30%;" />
<br> <br>
<!--Slide verification-->
<div id="dragContainer" style="width: 30%;">
<div id="dragBg"></div>
<div id="dragText"></div>
<div id="dragHandler" class="dragHandlerBg"></div>
</div>
<br> <br>
<input type="button" value="确定" style="color: white;background-color: blue;width: 30%;height: 40px;" />
<br> <br>
<div class="zhu">
<input type="button" value="注册" style="background-color: white;border: none;"/>
|
<input type="button" value="忘记密码" style="background-color: white;border: none;"/>
</div>
</main>
</body>
</html>
Realize the effect:
Summarize:
This is a simple login interface
To have the above effect, remember to use bootstrap
Include self-motivation quotes