首页
所有分类
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 DOM操作小结与实例
Jan 07 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
JavaScript基础篇（3)之Object、Function等引用类型
Nov 30 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 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
加载异常(1) 骨架屏(1) localStorage(1) SVN(1) Postman(1) virtualenv(1) NginxConfig(1) 共享文件夹(1) caddy(1) 横向滚动(1)
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
php foreach循环中使用引用的问题
2013/11/06 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
使用Appcan客户端自动更新PHP版本号（全）
2015/07/31 PHP
PHP多进程简单实例小结
2019/11/09 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
jsTree使用记录实例
2016/12/01 Javascript
js继承实现方法详解
2016/12/16 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
凯伦·米莲女装网上商店：Karen Millen
2017/11/07 全球购物
英国著名药妆店：Superdrug
2021/02/13 全球购物
岗位职责的定义
2013/11/10 职场文书
大学自荐信
2013/12/12 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
会计职业生涯规划书
2014/01/13 职场文书
优秀民警事迹材料
2014/01/29 职场文书
教师求职自荐信范文
2015/03/04 职场文书
图文详解Nginx版本平滑升级方案
2021/09/15 Servers