html模拟激光,HTML5 创意表单输入验证动效 - 激光射线

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var editProfileError = $(document.querySelector('.error-message'));

// Handle validation errors

if (editProfileError.length) {

triggerLasers();

}

$(document.getElementById('error-trigger')).click(triggerLasers);

// FIRE!

function triggerLasers() {

console.log('pew pew');

var errorDelay = 250;

$('.error-line').remove();

// select required fields that are currently invalid

$('input:required:invalid').each(function() {

var error = $(this);

setTimeout(function() {

linkErrors(error);

}, errorDelay);

errorDelay += 250;

});

}

// Show fields with validation errors

function linkErrors(error) {

var linkLine = $(document.createElement('div')).addClass('error-line').appendTo('body'),

editProfileErrorOffset = editProfileError.offset(),

errorOffset = error.offset();

editProfileErrorOffset.left += editProfileError.outerWidth();

editProfileErrorOffset.top += editProfileError.outerHeight();

var originX = editProfileErrorOffset.left,

originY = editProfileErrorOffset.top - 2,

lineLength = Math.sqrt((errorOffset.left - originX) * (errorOffset.left - originX) + (errorOffset.top - originY) * (errorOffset.top - originY)),

angle = 180 / 3.1415 * Math.acos((errorOffset.top - originY) / lineLength),

inverseAngle = 180 - angle;

// invert angle if to the right of origin

if (errorOffset.left > originX) {

angle *= -1;

}

// set linkLine origin

linkLine.css({

'top': editProfileErrorOffset.top,

'left': editProfileErrorOffset.left

});

// draw line from vague error message to field with error

linkLine.css({

'height': lineLength,

'-webkit-transform': 'rotate(' + angle + 'deg)',

'-moz-transform': 'rotate(' + angle + 'deg)',

'-o-transform': 'rotate(' + angle + 'deg)',

'-ms-transform': 'rotate(' + angle + 'deg)'

});

// flip line, hide and add error class to field with error

setTimeout(function() {

linkLine.css({

'top': errorOffset.top,

'left': errorOffset.left,

'height': 0,

'-webkit-transform': 'rotate(' + inverseAngle + 'deg)',

'-moz-transform': 'rotate(' + inverseAngle + 'deg)',

'-o-transform': 'rotate(' + inverseAngle + 'deg)',

'-ms-transform': 'rotate(' + inverseAngle + 'deg)'

});

error.addClass('error');

error.focus(function() {

$(this).removeClass('error');

});

}, 300);

}