首页
所有分类
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 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
javascript 类定义的4种方法
Sep 12 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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
HttpClient(1) 注解(1) ip2region(1) 反射(1) NTP(1) Quartz(1) RestTemplate(1) Windows Server 2022(3) Hive(5) dataBinding(1)
You might like
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
JS数组的赋值介绍
2014/03/10 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
Node.js实现文件上传
2016/07/05 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
Win7下搭建python开发环境图文教程（安装Python、pip、解释器）
2016/05/17 Python
Python pass详细介绍及实例代码
2016/11/24 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
Python-接口开发入门解析
2019/08/01 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
写给保洁员表扬信
2014/01/08 职场文书
事业单位接收函
2014/01/10 职场文书
法学院方阵解说词
2014/01/29 职场文书
优秀部门获奖感言
2014/02/14 职场文书
四年级学生评语大全
2014/04/21 职场文书
建设工程授权委托书
2014/09/22 职场文书
银行求职信怎么写
2019/06/20 职场文书