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

时间：2021-05-26

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章