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

2019-11-20 11:52:35

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

具体代码如下：

<!doctype html><html><head><meta charset="utf-8"><title>jQuery人性化表单标签提示</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript">!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("<div class='lb_wrap' style='position:relative; display: inline;'></div>")  if( btn.val().length > 0) {  var text = btn.data("new-placeholder") || btn.attr("placeholder");  $("<div class='lb_label " + position + "'>"+ text + "</div>").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;   $("<div class='lb_label " + position + "'>"+ text + "</div>").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);</script><style>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;}</style><script> $(document).ready( function() { $(".label_better").label_better({  easing: "bounce" }); });</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body> <div class="wrapper">   <div class="main">   <div class="header">  <h1>jQuery Label Better</h1>  <h2>Label your form input like a boss</h2>  <p class="credit">Created by Pete R., Founder of BucketListly</p>  <div class="btns">    </div>   </div>  <div class="page-container">  <form class="bl_form">   <input type="text" class="label_better" data-new-placeholder="Username" placeholder="Username" >   <input type="email" class="label_better" data-new-placeholder="Email Address" placeholder="Email Address">   <input type="password" value="abcdefg" class="label_better" data-new-placeholder="Password" placeholder="Password">   <input type="password" value="abcdefg" class="label_better" data-new-placeholder="Shhh.." placeholder="Confirm Password">  </form>  </div> </div> </div><div style="text-align:center;clear:both"></div></body></html>

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

上一篇：jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法

下一篇：javascript与Python快速排序实例对比