在您喜欢的网站上，有一个非混淆文件，该网站用于实现您想要的功能 (http://vox.io/public/a0ea2e1a63/static/js/Authentication/login.js)
所以你有一个工作示例的所有 javascript。所以重新开始吧！
只需使用他们网站上的源代码作为示例。逆向工程应该很容易——只需从一个示例应用程序从头开始......然后将源代码的关键部分移动到您的应用程序中。一块一块的。在迭代中测试它。
1) 添加表格 2) 添加动画 3) 等等
特别是搜索 .animate 并观察他们是如何做到的：
这是他们的代码：
(function($) {
$('.selectBox').customStyle();
$('#username_register').blur(function() {
var value = $.trim($(this).val());
if (value !== '') {
$('#username').attr('value', value).blur();
}
});
$('#username').blur(function() {
var value = $.trim($(this).val());
if (value !== '') {
$('#username_register').attr('value', value).prev().hide();
}
});
/*
* Landing animations
*/
var forms = $('#landing_forms > div > form');
var animStarted = false;
// Animation from signup process to vox.io login
$('#change_login').click(function(ev) {
if (animStarted === true) {
return false;
}
animStarted = true;
// Hide fields
$('> div, > fieldset, > a', '#login_voxio').css('opacity', 0);
$('#login_voxio #username').prev().css('opacity', 0);
// Show form
$('#login_voxio').show();
// Hide h1 and h2
$('> div', '#login_register').animate({
'opacity': 0
}, 'fast', function() {
var i = 1, x = $('.login_register_anim').length;
// Hide all input fields
$('.login_register_anim').animate({
'opacity': 0
}, 'fast', function() {
if (i >= x) {
// Push up username and password
$('#name').parent().slideUp('fast', function() {
// Hide label
$('#login_register #username_register').prev().animate({
'opacity': 0
}, 'fast');
// Show label
$('#login_voxio #username').prev().animate({
'opacity': 1
}, 'fast', function() {
// Hide form
$(forms).hide();
// Show form
$('#login_voxio').show();
$('#login_voxio #username').focus();
// Show and animate fields
$('> fieldset', '#login_voxio').css('opacity', 1);
$('> a', '#login_voxio').animate({
'opacity': 1
}, 'fast', function() {
animStarted = false;
});
});
});
}
i = i + 1;
});
});
// Show h1 and h2
$('> div', '#login_voxio').animate({
'opacity': 1
}, 'normal');
});
// Animation from vox.io login to signup process
$('#change_signup').click(function(ev) {
if (animStarted === true) {
return false;
}
animStarted = true;
// Hide fields
$('> div', '#login_register').css('opacity', 0);
$('> a', '#login_voxio').animate({
'opacity': 0
}, 'fast');
// Show form
$('#login_register').show();
// Hide h1 and h2
$('> div', '#login_voxio').animate({
'opacity': 0
}, 'normal', function() {
// Hide label
$('#login_voxio #username').prev().animate({
'opacity': 0
}, 'fast');
$('> fieldset', '#login_register').css('opacity', 1);
// Show label
$('#login_register #username_register').prev().animate({
'opacity': 1
}, 'fast', function() {
// Hide form
$(forms).hide();
// Show form
$('#login_register').show();
$('#name').parent().slideDown('fast', function() {
var i = 1, x = $('.login_register_anim').length;
$('.login_register_anim').animate({
'opacity': 1
}, 'fast', function() {
if (i >= x) {
animStarted = false;
}
i = i + 1;
});
});
});
});
// Show h1 and h2
$('> div', '#login_register').animate({
'opacity': 1
}, 'normal');
});
// Animation from vox.io login to social login
$('#change_social').click(function(ev) {
if (animStarted === true) {
return false;
}
animStarted = true;
// Hide fields
$('> div, > a', '#login_social').css('opacity', 0);
$('> fieldset', '#login_social').css('opacity', 1);
$('#landing_forms > div > form img').css({
'top': 20,
'left': 20,
'width': 0,
'height': 0
});
// Show form
$('#login_social').show();
$('> a, > fieldset', '#login_voxio').animate({
'opacity': 0
}, 'fast');
// Hide h1 and h2
$('> div', '#login_voxio').animate({
'opacity': 0
}, 'normal', function() {
$('> a', '#login_social').animate({
'opacity': 1
}, 'fast');
$('> div', '#login_social').animate({
'opacity': 1
}, 100, function() {
// Hide forms
$(forms).hide();
// Show form
$('#login_social').show();
var x = $('#landing_forms > div > form ul li img').length - 1;
$.each($('#landing_forms > div > form ul li img'), function(i, img) {
setTimeout(function() {
$(img).animate({
'width': 43,
'height': 43,
'top': 0,
'left': 0
}, 300, 'easeOutCubic', function() {
$(this).animate({
'width': 41,
'height': 41,
'top': 0,
'left': 0
}, 250, 'easeOutCubic', function() {
if (i >= x) {
$('> div, > a, > fieldset', '#login_voxio').css('opacity', 1);
animStarted = false;
}
});
});
}, i * 80);
});
});
});
// Show h1 and h2
$('> div', '#login_social').animate({
'opacity': 1
}, 'normal');
});
// Animation from social login to signup process
$('#change_signup_social').click(function(ev) {
if (animStarted === true) {
return false;
}
animStarted = true;
// Hide fields
$('> div, > fieldset', '#login_register').css('opacity', 0);
$('#login_register #username_register').prev().css('opacity', 1);
// Show form
$('#login_register').show();
// Hide fields
$('> a, > fieldset', '#login_social').animate({
'opacity': 0
}, 'fast');
// Hide h1 and h2
$('> div', '#login_social').animate({
'opacity': 0
}, 'normal', function() {
$('#name').parent().show();
$('.login_register_anim').css('opacity', 1).show();
$('> fieldset', '#login_register').animate({
'opacity': 1
}, 'fast', function() {
// Hide forms
$(forms).hide();
// Show form
$('#login_register').show();
animStarted = false;
});
});
// Show h1 and h2
$('> div', '#login_register').animate({
'opacity': 1
}, 'normal');
});
// Animation from social login to vox.io login
$('#change_voxio').click(function(ev) {
if (animStarted === true) {
return false;
}
animStarted = true;
// Hide fields
$('> div, > a, > fieldset', '#login_voxio').css('opacity', 0);
// Show form
$('#login_voxio').show();
// Hide fields
$('> a, > fieldset', '#login_social').animate({
'opacity': 0
}, 'fast');
// Hide h1 and h2
$('> div', '#login_social').animate({
'opacity': 0
}, 'normal', function() {
// Hide forms
$(forms).hide();
// Show form
$('#login_voxio').show();
$('> a', '#login_voxio').animate({
'opacity': 1
}, 'fast');
$('> fieldset', '#login_voxio').animate({
'opacity': 1
}, 'fast', function() {
animStarted = false;
});
});
// Show h1 and h2
$('> div', '#login_voxio').animate({
'opacity': 1
}, 'normal');
});
// Animation from vox.io login to forgot password process
$('#change_forgot').click(function(ev) {
if (animStarted === true) {
return false;
}
animStarted = true;
// Hide fields
$('> div, > fieldset, > p, #send-instructions', '#login_forgot').css('opacity', 0);
$('#login_forgot #femail').prev().css('opacity', 0);
// Show form
$('#login_forgot').show();
// Hide fields
$('> a', '#login_voxio').animate({
'opacity': 0
}, 'fast');
// Hide h1 and h2
$('> div', '#login_voxio').animate({
'opacity': 0
}, 'normal', function() {
$('#password').parent().slideUp('fast', function() {
$('#send-instructions').css('opacity', 1);
$('> p', '#login_forgot').animate({
'opacity': 1
}, 'fast');
$('#signin').animate({
'bottom': 21
}, 50, function() {
$('> fieldset', '#login_forgot').css('opacity', 1);
// Hide forms
$(forms).hide();
// Show form
$('#login_forgot').show();
$('#login_forgot #femail').focus();
$('#signin').css('bottom', 8);
// Hide label
$('#login_voxio #username').prev().animate({
'opacity': 0
}, 'fast');
// Show label
$('#login_forgot #femail').prev().animate({
'opacity': 1
}, 'fast', function() {
animStarted = false;
});
});
});
});
// Show h1 and h2
$('> div', '#login_forgot').animate({
'opacity': 1
}, 'normal');
});
// Animation from forgot password process to signup process
$('#change_signup_forgot').click(function(ev) {
if (animStarted === true) {
return false;
}
animStarted = true;
// Show fields
$('#name').parent().show();
$('#password').parent().show();
$('> fieldset > div, #register_submit', '#login_register').css('opacity', 1);
$('#login_register #username_register').prev().css('opacity', 1);
// Hide fields
$('> div, > fieldset', '#login_register').css('opacity', 1);
// Show form
$('#login_register').show();
$('> p, > fieldset', '#login_forgot').animate({
'opacity': 0
}, 'fast');
// Hide h1 and h2
$('> div', '#login_forgot').animate({
'opacity': 0
}, 'normal', function() {
// Hide forms
$(forms).hide();
// Show form
$('#login_register').show();
$('> fieldset', '#login_register').animate({
'opacity': 1
}, 'fast', function() {
animStarted = false;
});
});
// Show h1 and h2
$('> div', '#login_register').animate({
'opacity': 1
}, 'normal');
});
/*
* End of animations :)
* Some other stuff we have to handle
*/
// Sign up process
var profile_form_data = function(input, status, pending) {
$(input).data({
'status': status,
'pending': (pending !== undefined ? pending : false)
});
};
$.each($('#login_register input.input'), function(i, input) {
profile_form_data(input, false, false);
});
var form_validators = {
email: function(value) {
var email = /^([^@]+)@([^\s@.]([^\s@.]*\.[^\s@.]+)+)$/;
return email.test(value);
},
username: function(input, value) {
profile_form_data(input, false);
if ($(input).data('status') === false && $(input).data('pending') === false) {
profile_form_data(input, false, true);
var div = $(input).parent();
div.find('p').remove();
$(input).removeClass('valid invalid');
if (0 < value.length && value.length < 3) {
$(input).addClass('invalid');
div.append('<p>Username requires at least 3 characters.</p>');
} else {
$.ajax({
'url': VoxioUrls.ajaxValidationUsername,
'cache': false,
'data': {
'username': value
},
'success': function(data) {
if (data === 'true') {
profile_form_data(input, true);
$(input).addClass('valid');
div.append('<p class="success">Success</p>');
if ($('#login_register').data('submitted') === true) {
$('#login_register').data('submitted', false).submit();
}
} else if (data === 'false') {
profile_form_data(input, false);
$(input).addClass('invalid');
div.append('<p>Huh, this username is already in use.</p>');
} else if (data === 'short') {
profile_form_data(input, false);
$(input).addClass('invalid');
div.append('<p>Username requires at least 3 characters.</p>');
}
}
});
}
}
}
};
// name
// var name_value = $.trim($('#login_register #name').val());
$('#login_register #name').blur(function(e) {
var value = $.trim($(this).val());
var div = $(this).parent();
div.find('p').remove();
profile_form_data(this, false);
$(this).removeClass('valid invalid');
if (value !== '') {
$(this).addClass('valid');
div.append('<p class="success">Success</p>');
profile_form_data(this, true);
var v = $.trim($('#login_register #username_register').val());
if (v === '' && value.length >= 3) {
$.ajax({
'url': VoxioUrls.ajaxRecommendUsername,
'cache': false,
'data': {
'name': value
},
'dataType': 'json',
'success': function(response) {
if (response.username !== '' && $.trim($('#login_register #username_register').val()) === '') {
$('#login_register #username_register').attr('value', response.username).keyup();
}
}
});
}
}
}).focus(function() {
$(this).removeClass('valid invalid').parent().find('p').remove();
profile_form_data(this, false);
});
// email
$('#login_register #email').blur(function(e) {
var value = $.trim($(this).val());
var div = $(this).parent();
div.find('p').remove();
$(this).removeClass('valid invalid');
profile_form_data(this, false);
if (form_validators.email(value) === true) {
$(this).addClass('valid');
div.append('<p class="success">Success</p>');
profile_form_data(this, true);
} else if (value !== '') {
$(this).addClass('invalid');
div.append('<p>This does not appear to be a valid email.</p>');
}
}).focus(function() {
profile_form_data(this, false);
});
// password
$('#login_register #password1').blur(function(e) {
var value = $.trim($(this).val());
var div = $(this).parent();
div.find('p').remove();
profile_form_data(this, false);
$(this).removeClass('valid invalid');
if (value !== '') {
if (value.length < 4) {
$(this).addClass('invalid');
div.append('<p>Too short. Enter at least 4 characters. It’s safer.</p>');
} else {
$(this).addClass('valid');
div.append('<p class="success">Success</p>');
profile_form_data(this, true);
}
}
}).focus(function() {
$(this).removeClass('valid invalid').parent().find('p').remove();
profile_form_data(this, false);
});
// username
$('#login_register #username_register').keyup(function(ev) {
var div = $(this).parent();
var p = div.find('p');
if (p.hasClass('loading') === false) {
p.remove();
}
$(this).removeClass('valid invalid');
}).blur(function(e) {
$(this).removeClass('valid invalid');
this.value = $.trim(this.value.replace(/[^A-Za-z0-9\_\-]/ig, ''));
if ($(this).val() !== '' && $(this).data('status') === false && $(this).data('pending') === false) {
$(this).parent().append('<p class="loading">Loading ...</p>');
form_validators.username(this, $(this).val());
} else if ($(this).val() !== '') {
$(this).addClass('valid');
}
}).focus(function() {
$(this).removeClass('valid invalid').parent().find('p').remove();
profile_form_data(this, false);
});
$('#login_register').data('submitted', false);
$('#login_register').ajaxForm({
'beforeSerialize': function() {
var nextStep = false, emptyInput = null;
$.each($('#login_register input.input'), function(i, input) {
var value = $.trim($(input).attr('value'));
if (value !== '') {
if ($(input).data('status') === false) {
nextStep = false;
if ($(input).data('pending') === true) {
$('#login_register').data('submitted', true);
return false;
} else if ($(input).data('status') === false) {
$('html, body').animate({
'scrollTop': $(input).position().top
}, 250, function() {
$(input).focus();
});
return false;
}
}
nextStep = true;
} else {
if (emptyInput === null) {
emptyInput = input;
nextStep = false;
return false;
}
}
});
if (emptyInput !== null && nextStep === false) {
$('html, body').animate({
'scrollTop': $(emptyInput).position().top
}, 250, function() {
$(emptyInput).focus();
});
}
return nextStep;
},
'dataType': 'json',
'success': function(response) {
if (response.status === false && response.errors !== undefined) {
$.each(response.errors, function(i, error) {
var input = $('input[name="' + error.key + '"]');
if (input.length === 1) {
input.addClass('invalid');
var div = input.parent(), message = error.message;
div.find('p').remove();
try {
message = input.attr('id').toLowerCase() === 'email' ? 'Huh, this email is already in use.' : message;
} catch (e) {
}
div.append('<p>' + message + '</p>');
}
});
} else if (response.status === true && response.url) {
VoxioAjax.response(response, true);
}
}
});
// Login process
$('#login_voxio').submit(function() {
var that = this;
if ($(that).data('submitted') === true) {
return false;
}
$(that).data('submitted', true);
$('#password').parent().find('p').remove();
var username = $('#username'), password = $('#password'), valid = true;
if ($.trim(username.val()) === '') {
username.focus();
valid = false;
} else if ($.trim(password.val()) === '') {
password.focus();
valid = false;
}
if (valid === true) {
$('#signin').addClass('loading');
$.ajax({
'url': $(this).attr('action'),
'cache': false,
'data': {
'username': username.val(),
'password': password.val()
},
'dataType': 'json',
'method': 'post',
'complete': function() {
$(that).data('submitted', false);
},
'success': function(response) {
$('#signin').removeClass('loading');
if (response.status === true && response.url !== undefined) {
VoxioAjax.redirect(response.url);
} else if (response.status === false && response.message !== undefined) {
var div = $('#password').parent();
div.find('p').remove();
div.append('<p>' + response.message + '</p>');
}
},
'statusCode': {
302: function() {
VoxioAjax.redirect('/');
}
}
});
} else {
$(that).data('submitted', false);
}
return false;
}).data('submitted', false);
// Forgot password
$('#femail').bind('focus blur', function() {
var value = $.trim($(this).val()), valid_email = /^([^@]+)@([^\s@.]([^\s@.]*\.[^\s@.]+)+)$/.test(value);
$(this).removeClass('valid invalid');
if ($(this).data('valid') === false) {
$('#login_forgot > p').remove()
}
if (value !== '') {
if (valid_email === false) {
$(this).addClass('invalid');
$('#login_forgot').append('<p class="invalid">Please enter a valid email address.</p>');
} else if ($(this).data('valid') === true) {
$(this).addClass('valid');
}
}
}).data('valid', false);
$('#login_forgot').ajaxForm({
'beforeSubmit': function() {
var value = $.trim($('#femail').val()), valid_email = /^([^@]+)@([^\s@.]([^\s@.]*\.[^\s@.]+)+)$/.test(value), valid = false;
$('#femail').removeClass('valid invalid');
$('#login_forgot > p').remove()
if (value !== '') {
if (valid_email === false) {
$('#login_forgot').append('<p class="invalid">Please enter a valid email address.</p>');
$('#femail').addClass('invalid').focus();
} else if (valid_email === true) {
$('#send-instructions').addClass('loading');
valid = true;
}
}
return valid;
},
'success': function(response) {
$('#send-instructions').removeClass('loading');
$('#login_forgot > p').remove();
$('#femail').removeClass('valid invalid');
if (response === 'success') {
$('#femail').addClass('valid');
$('#login_forgot').append('<p>Recovery link was sent to your email.</p>');
$('#femail').data('valid', true);
setTimeout(function() {
if (animStarted === true) {
return false;
}
animStarted = true;
// Hide fields
$('> div, > fieldset, > a', '#login_voxio').css('opacity', 0);
// Show fields
$('#login_voxio #username').prev().css('opacity', 1).show();
$('#password').parent().show();
// Show form
$('#login_voxio').show();
$('> p, > fieldset', '#login_forgot').animate({
'opacity': 0
}, 'fast', function() {
$('> p', '#login_forgot').remove();
});
// Hide h1 and h2
$('> div', '#login_forgot').animate({
'opacity': 0
}, 'normal', function() {
// Hide forms
$(forms).hide();
// Show form
$('#login_voxio').show();
$('#login_voxio #username').focus();
$('> fieldset', '#login_voxio').animate({
'opacity': 1
}, 'fast', function() {
animStarted = false;
$('#femail').attr('value', '').data('valid', true);
});
$('> a', '#login_voxio').animate({
'opacity': 1
}, 'fast');
});
// Show h1 and h2
$('> div', '#login_voxio').animate({
'opacity': 1
}, 'normal');
}, 2500);
} else {
$('#femail').addClass('invalid');
if (response === 'invalid') {
$('#login_forgot').append('<p class="invalid">Are you sure this is the right email address?</p>');
} else if (response === 'error') {
$('#login_forgot').append('<p class="invalid">Sorry an error occured :( Try again later.</p>');
}
}
}
});
})(jQuery);
$(document).ready(function() {
var check_inputs = {
check: function(input) {
var value = $.trim($(input).attr('value'));
var span = $(input).prev();
if (value !== '') {
$(span).hide();
} else {
$(span).show();
}
},
init: function() {
$.each($('div input', '#landing_forms > div > form'), function() {
check_inputs.check(this);
$(this).blur(function() {
check_inputs.check(this);
}).keyup(function() {
check_inputs.check(this);
}).focus(function() {
check_inputs.check(this);
});
});
}
};
check_inputs.init();
$('div span', '#landing_forms > div > form').click(function() {
$(this).next().focus();
});
});