首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 10, 2015

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

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

运行效果截图如下：

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

具体代码如下：

<!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实现表单输入时提示文字滑动向上效果

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
js实现进度条的方法
Feb 13 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
javascript与Python快速排序实例对比
Aug 10 #Javascript
javascript密码强度校验代码（两种方法）
Aug 10 #Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 #Javascript
jQuery解决input超多的表单提交
Aug 10 #Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 #Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 #Javascript
javascript中caller和callee详解
Aug 10 #Javascript
YB400(2) 1 Tube Radio(1) 再生机(1) YB235(1) 东方红(1) TECSUN(1) 直流胆(1) PL-365(1) YB217(1) 德生(17)
You might like
php实现rc4加密算法代码
2012/04/25 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
使用pthreads实现真正的PHP多线程（需PHP5.3以上版本）
2014/05/05 PHP
PHP 面向对象程序设计（oop）学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
jQuery学习笔记之 Ajax操作篇（三） - 过程处理
2014/06/23 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
js变量提升深入理解
2016/09/16 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[00:32]2016完美“圣”典风云人物：Maybe宣传片
2016/12/05 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
Python错误处理操作示例
2018/07/18 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
数学教育专业求职信
2014/07/22 职场文书
2015年环卫工作总结
2015/04/28 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
Moment的feature导致线上bug解决分析
2022/09/23 Javascript