1.
<input type="password" class="form-control login-password" placeholder="请输入密码"/>
<div class="form-group" id="form-validate">
<div id="dragContainer">
<div id="dragBg"></div>
<div id="dragText"></div>
<div id="dragHandler" class="dragHandlerBg"></div>
</div>
</div>
<button class="btn-submit btn-login" disabled>登陆</button>
重要的是中间 “form-validate” ,用来显示滑块的
/* 滑动控件容器,亮灰色背景 */
#form-validate{
position: absolute;
opacity: 0;
visibility: hidden;
z-index: -1;
}
#form-validate.active{
position: relative;
opacity: 1;
visibility: visible;
z-index: 10;
}
#dragContainer {
position: relative;
display: inline-block;
background: #e8e8e8;
width: 340px;
height: 44px;
border: 2px solid #e8e8e8;
}
/* 滑块左边部分,绿色背景 */
#dragBg {
position: absolute;
background-color: #7ac23c;
width: 0px;
height: 100%;
}
/* 滑动验证容器文本 */
#dragText {
position: absolute;
width: 100%;
height: 100%;
/* 文字水平居中 */
text-align: center;
/* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */
line-height: 40px;
/* 文本不允许选中 */
user-select: none;
-webkit-user-select: none;
}
/* 滑块 */
#dragHandler {
position: absolute;
width: 40px;
height: 100%;
cursor: move;
}
/* 滑块初始背景 */
.dragHandlerBg {
background: #fff no-repeat center url(“img");
}
/* 验证成功时的滑块背景 */
.dragHandlerOkBg {
background: #fff no-repeat center url("img");
}
2. 通过js判断
if(!device.mobile()){
(function() {
var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
// Main
initHeader();
initAnimation();
addListeners();
function initHeader() {
width = window.document.documentElement.clientWidth;
height = window.document.documentElement.clientHeight;
target = {x: