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

前端技术 2023/09/07 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/20467

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案