鼠标滑动 html,鼠标滑动登陆.html

/*滑动按钮*/

.drag{position: relative;background-color: #0d4455;width: 379px;height: 54px;line-height: 34px;text-align: center;*text-align: left;margin-left: 22px;border-radius: 20px;}

.drag .handler{position: absolute;top: -4px;left: 0px;width: 110px;height: 60px;cursor: move;border-radius: 20px;}

.handler_bg{background: #e9e9e9 url(../img/right.png) no-repeat center;}

.handler_ok_bg{background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;}

.drag .drag_bg{background-color: #0dcbe0;height: 54px;width: 0px;border-radius: 20px 0 0 20px;}

.drag .drag_text{position: absolute;top: 0px;width: 100%;*width: 254px;height: 54px;line-height: 54px;-moz-user-select: none;-webkit-user-select: none;user-select: none;-o-user-select: none;-ms-user-select: none;font-size: 16px;color: white;font-weight: bold;*padding-left: 120px;}

/*

* drag 1.0

* date 2016-04-14

* 拖动滑块

*/

(function($) {

$.fn.drag = function(options) {

var x, drag = this,

isMove = false,

defaults = {};

var options = $.extend(defaults, options);

//添加背景，文字，滑块

var html = '

'

向右滑动登录>>>

' +

'

this.append(html);

var handler = drag.find('.handler');

var drag_bg = drag.find('.drag_bg');

var text = drag.find('.drag_text');

var maxWidth = drag.width() - handler.width(); //能滑动的最大间距

//鼠标按下时候的x轴的位置

handler.mousedown(function(e) {

isMove = true;

x = e.pageX - parseInt(handler.css('left'), 10);

});

//鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离

$(document).mousemove(function(e) {

var _x = e.pageX - x;

$('.val').html(_x);

if (isMove) {

if (_x > 0 && _x <= maxWidth) {

handler.css({

'left': _x

});

drag_bg.css({

'width': _x + 11

});

} else if (_x > maxWidth) { //鼠标指针移动距离达到最大时清空事件

dragOk();

}

}

}).mouseup(function(e) {

isMove = false;

var _x = e.pageX - x;

if (true) { //if (_x < maxWidth) 鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置

handler.css({

'left': 0

});

drag_bg.css({

'width': 0

});

}

});

//清空事件

function dragOk() {

//验证 账号 密码 验证码

if ($('.tbody_box .contentBox .content_right .top p').eq(0).children('input').val() == "") {

alert('用户名不能为空！');

$('.tbody_box .contentBox .content_right .top p').eq(0).children('input').focus();

initCicle();

} else if ($('.tbody_box .contentBox .content_right .top p').eq(1).children('input').val() == "") {

alert('密码不能为空！');

$('.tbody_box .contentBox .content_right .top p').eq(1).children('input').focus();

initCicle();

} else if ($('.tbody_box .contentBox .content_right .top p').eq(2).children('input').val() == "") {

alert('验证码不能为空！');

$('.tbody_box .contentBox .content_right .top p').eq(2).children('input').focus();

initCicle();

} else {

handler.removeClass('handler_bg').addClass('handler_ok_bg');

text.text('验证通过');

drag.css({

'color': '#fff'

});

handler.unbind('mousedown');

$(document).unbind('mousemove');

$(document).unbind('mouseup');

}

}

//鼠标滑动块初始化

function initCicle() {

handler.css({

'left': 0

});

drag_bg.css({

'width': 0

});

isMove = false;

}

};

})(jQuery);

$('.drag').drag();

一键复制

编辑

Web IDE

原始数据

按行查看

历史