Contoh dalam artikel ini menerangkan cara jquery melaksanakan kesan menggesa teks untuk meluncur ke atas apabila memasukkan borang. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Berikut ialah kesan gesaan kotak input borang yang dilaksanakan berdasarkan jQuery Apabila tiada input dibuat, teks gesaan dipaparkan dalam kotak input Apabila tetikus mengklik pada kotak teks untuk memasukkan teks, teks gesaan akan keluar kotak input, yang kelihatan sangat pelik. Keperibadiannya juga sangat pintar, pengalaman pengguna agak baik, dan beberapa atribut CSS3 digunakan oleh itu, apabila menguji, sila cuba gunakan versi IE9 atau pelayar web yang lebih tinggi dan Firefox.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Kod khusus adalah seperti berikut:
<!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>Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.
Apakah pemalam jquery?
Bagaimana untuk mengendalikan json dengan jquery
Bagaimana untuk memadam elemen dalam jquery
Penggunaan kaedah jQuery hover().
jquery melaksanakan kaedah paging
Apakah elemen tersembunyi dalam jquery
Apa yang ditonjolkan dalam jquery
Bagaimana untuk menyelesaikan masalah bahawa partition cakera keras tidak boleh dibuka
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
