html表单请输入数字滑动,jquery实现表单输入时提示文字滑动向上效果

本文实例讲述了jquery实现表单输入时提示文字滑动向上效果。分享给大家供大家参考。具体如下：

这里基于jQuery实现的表单输入框提示效果，当不输入的时候，提示文字就显示在输入框中，当鼠标点击文本框要输入文字的时候，提示文字向滑出输入框，好像很个性也很智能的样子，用户体验比较不错，运用了CSS3的部分属性，因此在测试时，请尽量要用高版本的IE9或chrome和火狐等网页浏览器。

运行效果截图如下：

具体代码如下：

jQuery人性化表单标签提示

!function($){

var defaults = {

position: "top",

animationTime: 500,

easing: "ease-in-out",

offset: 20,

hidePlaceholderOnFocus: true

};

$.fn.animateLabel = function(settings, btn) {

var position = btn.data("position") || settings.position,

posx = 0,

posy = 0;

$(this).css({

"left": "auto",

"right": "auto",

"position": "absolute",

"-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing,

"-moz-transition": "all " + settings.animationTime + "ms " + settings.easing,

"-ms-transition": "all " + settings.animationTime + "ms " + settings.easing,

"transition": "all " + settings.animationTime + "ms " + settings.easing

});

switch (position) {

case 'top':

posx = 0;

posy = ($(this).height() + settings.offset) * -1;

$(this).css({

"top": "0",

"opacity": "1",

"-webkit-transform": "translate3d(" + posx + ", " + posy + "px, 0)",

"-moz-transform": "translate3d(" + posx + ", " + posy + "px, 0)",

"-ms-transform": "translate3d(" + posx + ", " + posy + "px, 0)",

"transform": "translate3d(" + posx + ", " + posy + "px, 0)"

});

break;

case 'bottom':

posx = 0;

posy = ($(this).height() + settings.offset);

$(this).css({

"bottom": "0",

"opacity": "1",

"-webkit-transform": "translate3d(" + posx + ", " + posy + "px, 0)",

"-moz-transform": "translate3d(" + posx + ", " + posy + "px, 0)",

"-ms-transform": "translate3d(" + posx + ", " + posy + "px, 0)",

"transform": "translate3d(" + posx + ", " + posy + "px, 0)"

});

break;

case 'left':

posx = ($(this).width() + settings.offset) * -1;

posy = 0;

$(this).css({

"left": 0,

"top": 0,

"opacity": "1",

"-webkit-transform": "translate3d(" + posx + "px, " + posy + "px, 0)",

"-moz-transform": "translate3d(" + posx + "px, " + posy + "px, 0)",

"-ms-transform": "translate3d(" + posx + "px, " + posy + "px, 0)",

"transform": "translate3d(" + posx + "px, " + posy + "px, 0)"

});

break;

case 'right':

posx = $(this).width() + settings.offset;

posy = 0;

$(this).css({

"right": 0,

"top": 0,

"opacity": "1",

"-webkit-transform": "translate3d(" + posx + "px, " + posy + "px, 0)",

"-moz-transform": "translate3d(" + posx + "px, " + posy + "px, 0)",

"-ms-transform": "translate3d(" + posx + "px, " + posy + "px, 0)",

"transform": "translate3d(" + posx + "px, " + posy + "px, 0)"

});

break;

}

}

$.fn.removeAnimate = function(settings, btn) {

var position = btn.data("position") || settings.position,

posx = 0,

posy = 0;

$(this).css({

"top": "0",

"opacity": "0",

"-webkit-transform": "translate3d(" + posx + ", " + posy + "px, 0)",

"-moz-transform": "translate3d(" + posx + ", " + posy + "px, 0)",

"-ms-transform": "translate3d(" + posx + ", " + posy + "px, 0)",

"transform": "translate3d(" + posx + ", " + posy + "px, 0)"

});

}

$.fn.label_better = function(options){

var settings = $.extend({}, defaults, options),

el = $(this),

triggerIn = "focus",

triggerOut = "blur";

if(settings.easing == "bounce") settings.easing = "cubic-bezier(0.175, 0.885, 0.420, 1.310)"

el.each(function( index, value ) {

var btn = $(this),

position = btn.data("position") || settings.position;

btn.wrapAll("

if( btn.val().length > 0) {

var text = btn.data("new-placeholder") || btn.attr("placeholder");

$("

"+ text + "

").css("opacity", "0").insertAfter(btn).animateLabel(settings, btn);

}

btn.bind(triggerIn, function() {

if(btn.val().length < 1) {

var text = btn.data("new-placeholder") || btn.attr("placeholder"),

position = btn.data("position") || settings.position;

$("

"+ text + "

").css("opacity", "0").insertAfter(btn).animateLabel(settings, btn);

}

if (settings.hidePlaceholderOnFocus == true) {

btn.data("default-placeholder", btn.attr("placeholder"))

btn.attr("placeholder", "")

}

btn.parent().find(".lb_label").addClass("active");

}).bind(triggerOut, function() {

if(btn.val().length < 1) {

btn.parent().find(".lb_label").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ $(this).remove(); }).removeAnimate(settings, btn)

}

if (settings.hidePlaceholderOnFocus == true) {

btn.attr("placeholder", btn.data("default-placeholder"))

btn.data("default-placeholder", "")

}

btn.parent().find(".lb_label").removeClass("active");

});

});

}

}(window.jQuery);

html {

height: 100%;

}

body {

background: #272D30;

padding: 0;

text-align: center;

font-family: 'open sans';

position: relative;

margin: 0;

height: 100%;

}

.wrapper {

height: auto !important;

height: 100%;

margin: 0 auto;

overflow: hidden;

}

a {

text-decoration: none;

}

h1, h2 {

width: 100%;

float: left;

}

h1 {

margin-top: 100px;

color: #fff;

text-shadow: 0 1px 5px rgba(0,0,0,0.5);

margin-bottom: 5px;

font-size: 70px;

letter-spacing: -4px;

}

h2 {

color: #5F7591;

font-weight: bold;

text-shadow: 0 1px 5px rgba(0,0,0,0.5);

margin-top: 0;

margin-bottom: 10px;

}

.pointer {

color: #9b59b6;

font-family: 'Pacifico', cursive;

font-size: 30px;

margin-top: 15px;

}

pre {

margin: 80px auto;

}

pre code {

padding: 35px;

border-radius: 5px;

font-size: 15px;

background: rgba(0,0,0,0.1);

border: rgba(0,0,0,0.05) 5px solid;

max-width: 500px;

}

.main {

float: left;

width: 100%;

margin: 0 auto;

}

.main h1 {

padding:20px 50px;

float: left;

width: 100%;

font-size: 60px;

box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

font-weight: 100;

margin: 0;

padding-top: 25px;

font-family: 'Pacifico';

letter-spacing: 2px;

}

.main h1.demo1 {

background: #1ABC9C;

}

.reload.bell {

font-size: 12px;

padding: 20px;

width: 45px;

text-align: center;

height: 47px;

border-radius: 50px;

-webkit-border-radius: 50px;

-moz-border-radius: 50px;

}

.reload.bell #notification {

font-size: 25px;

line-height: 140%;

}

.reload, .btn{

display: inline-block;

border: 4px solid #A2261E;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

background: #CC3126;

display: inline-block;

line-height: 100%;

padding: 0.7em;

text-decoration: none;

color: #fff;

width: 100px;

line-height: 140%;

font-size: 17px;

font-family: open sans;

font-weight: bold;

}

.reload:hover{

background: #A2261E;

}

.btn {

width: 200px;

color: #fff;

border: none;

margin-left: 10px;

background: rgba(255, 255, 255, 0.11);

}

.clear {

width: auto;

}

.btn:hover, .btn:hover {

background: rgba(255,255,255,0.3);

}

.btns {

width: 410px;

margin: 50px auto;

}

.credit {

font-style: italic;

text-align: center;

color: #fff;

padding: 10px;

margin: 0 0 40px 0;

float: left;

width: 100%;

}

.credit a {

color: #ccc;

text-decoration: none;

font-weight: bold;

}

.back {

position: absolute;

top: 0;

left: 0;

text-align: center;

display: block;

padding: 7px;

width: 100%;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

background: rgba(0, 0, 0, 0.65);

font-weight: bold;

font-size: 13px;

color: #fff;

-webkit-transition: all 200ms ease-out;

-moz-transition: all 200ms ease-out;

-o-transition: all 200ms ease-out;

transition: all 200ms ease-out;

}

.back:hover {

background: rgba(0, 0, 0, 0.85);

}

.bl_form {

margin: 150px 0;

}

.bl_form input {

padding-top: 15px;

background: rgba(255,255,255,0.10);

box-shadow: 0 2px 8px rgba(0,0,0,0.2);

border: none;

color: white;

padding: 10px 15px;

border-radius: 25px;

font-size: 16px;

outline: none;

}

.lb_wrap .lb_label.top, .lb_wrap .lb_label.bottom {

left: 15px !important;

}

.lb_wrap .lb_label.left {

left: 0;

}

.lb_label {

font-weight: bold;

color: #999;

}

.lb_label.active {

color: #FFF;

}

$(document).ready( function() {

$(".label_better").label_better({

easing: "bounce"

});

});

jQuery Label Better

Label your form input like a boss

Created by Pete R., Founder of BucketListly

希望本文所述对大家的jquery程序设计有所帮助。