以下是 jQ向上滑动提示表单js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery向上滑动提示表单</title>
<style>
.compactlabel-wrapper {
display: inline-block;
position: relative;
}
.compactlabel-wrapper-on {
z-index: 5;
}
.compactlabel-wrapper label {
position: absolute;
z-index: 4;
}
.compactlabel-wrapper label.compactlabel-hide {
z-index: 2;
}
.compactlabel-wrapper input {
position: relative;
z-index: 3;
}
.compactlabel-label-backing {
position: absolute;
z-index: 1;
}
/* personalized styles */
.compactlabel-label-backing {
padding: 2px 3px 4px 3px;
border-style: solid;
border-width: 2px 2px 0 2px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
background-color: #e0e0e0;
-webkit-transition: 1s background-color;
}
.compactlabel-wrapper label {
font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Arial, sans-serif;
color: #999;
padding: 4px;
font-size: 80%;
font-size: 12px;
}
.compactlabel-wrapper-on,
.compactlabel-wrapper-on .compactlabel-label-backing {
-moz-box-shadow: SkyBlue 0 0 5px;
-webkit-box-shadow: SkyBlue 0 0 5px;
box-shadow: SkyBlue 0 0 5px;
}
input[type=text] {
padding: 3px;
margin: 0;
border: solid #ddd 2px;
background-color: #e0e0e0;
font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Arial, sans-serif;
font-size: 12px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
background-image: -moz-linear-gradient( 270deg, rgba(255,255,255,0), rgba(100,100,100,.15) );
-webkit-transition: 1s background-color, 1s border-color;
}
input[type=text] {
background-image: -webkit-gradient(linear, left bottom, left top, to(rgba(255,255,255,0)), from(rgba(100,100,100,.15)));
outline: none;
}
input[type=text]:hover,
input[type=text]:focus,
.compactlabel-wrapper-on input,
.compactlabel-wrapper-on .compactlabel-label-backing {
background-color: #fff;
border-color: #fff;
}
form {
position: absolute;
left: 50%;
top: 0px;
bottom: 0;
width: 360px;
margin: 0 10px;
padding: 150px 30px;
background-color: #555;
/*-moz-box-shadow: 0 0 50px #252525;
-webkit-box-shadow: 0 0 5px rgba( 0, 0, 0, .5 );
box-shadow: 0 0 5px rgba( 0, 0, 0, .5 );*/
border: inset 2px rgba( 99, 99, 99, .02 );
}
form {
background-color: rgba( 55, 55, 55, .01 );
background-image: -moz-linear-gradient( 270deg, rgba( 55, 55, 55, 0 ), rgba( 55, 55, 55, .1 ) ), -moz-repeating-linear-gradient(top left 45deg, rgba(255,255,255,.008), rgba(255,255,255,.008) 15px, rgba(0,0,0,0) 15px, rgba(0,0,0,0) 30px);
}
form {
background: -webkit-gradient(linear, left top, left bottom, from(rgba( 55, 55, 55, 0 )), from(rgba( 55, 55, 55, .1 )));
}
h1 {
font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande";
font-weight: normal;
color: #dddde0;
font-size: 50px;
text-shadow: -1px -1px 0 #111;
line-height: 70%;
position: absolute;
right: 50%;
top: 0;
bottom: 0;
padding: 130px 10px;
text-shadow: rgba( 221, 221, 224, .5 ) 0 0 3px;
border-right: solid rgba( 225,255,255,.02) 1px;
border-left: solid rgba( 225,255,255,.02) 1px;
background-color: rgba( 45,45,51,.1);
margin: 0;
}
h1 a {
display: block;
font-size: 18px;
color: #dddde0;
text-decoration: none;
opacity: .2;
text-transform: lowercase;
-webkit-transition: 2s opacity;
}
h1 a:hover {
opacity: 1;
}
body {
background-color: #222226;
background-image: -moz-linear-gradient( 270deg, rgba(255,255,255,.05), rgba(255,255,255,0) );
background-repeat: no-repeat;
padding: 0;
margin: 0;
min-height: 100%;
min-width: 900px;
position: relative;
-moz-box-shadow: inset 0 0 40px rgba(57,57,64,.5);
}
body {
background-image: -webkit-gradient(linear, left top, left bottom, to(rgba(255,255,255,0)), from(rgba(255,255,255,.05)));
}
html {
height: 100%;
}
#first-name,
#last-name {
width: 150px;
}
#street {
width: 314px;
}
#city {
width: 136px;
}
#state,
#zip {
width: 75px;
}
p {
margin: 5px;
}
</style>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script>
jQuery( document ).ready( function( ){
// For all the inputs that are text inputs
jQuery( 'input:text' ).each( function( ){
var $this = jQuery( this );
// get the label
var label = jQuery( 'label[for='+this.id+']' );
// If no label, then return to avoid errors
if( label.size( ) == 0 ){
return;
}
// create wrapper element
var wrapper = jQuery( '<div class="compactlabel-wrapper"></div>' );
$this.wrap( wrapper );
// move the label to before the the input
$this.before( label );
// create label backing
var backing = jQuery( '<div class="compactlabel-label-backing"></div>' )
.insertBefore( $this )
.height( label.height( ) )
.width( label.width( ) );
// basic style information
var labelOffset = label.position( ), inputOffset = $this.position( ), labelHeight = label.outerHeight( );
// flag for if on or off
var isHover = false, isFocus = false;
// a jQuery object of the backing and label to animate both together
var animatedElements = jQuery( backing.get( ) ).add( label.get( ) );
// common functionality for hover on and focus on
var on = function( event ){
$this.parent( ).addClass( 'compactlabel-wrapper-on' );
animatedElements.stop( ).animate( { "top": '-'+(labelHeight - inputOffset.top)+'px' } );
};
// common functionality for hover off and focus off
var off = function( event ){
if( isHover || isFocus ){
return;
}
if( inputEmpty ){
label.removeClass( 'compactlabel-hide' );
} else {
label.addClass( 'compactlabel-hide' );
}
if( !inputEmptyChange ){
animatedElements.stop( );
}
animatedElements.animate(
{ "top": labelOffset.top + 'px' },
function( ){
$this.parent( ).removeClass( 'compactlabel-wrapper-on' )
} );
};
var onHover = function( event ){
isHover = true;
on( event );
};
var offHover = function( event ){
isHover = false;
off( event );
};
var onFocus = function( event ){
isFocus = true;
on( event );
};
var offFocus = function( event ){
isFocus = false;
off( event );
};
// The pieces for keeping track if the value of the input is empty
var inputEmpty = false, inputEmptyStart = false, inputEmptyChange = false;
var checkInputEmpty = function( ){
inputEmpty = $this.val( ) == '';
};
checkInputEmpty( );
// ID for setTimeout for checkInputEmpty
var checkInputEmptyFnID = null;
if( !inputEmpty ){
label.addClass( 'compactlabel-hide' );
}
// add the events
// events to track if the value changed empty state
$this.focus( function( ){
inputEmptyStart = inputEmpty;
inputEmptyChange = false;
checkInputEmptyFnID = setInterval( checkInputEmpty, 50 );
} );
$this.blur( function( ){
clearInterval( checkInputEmptyFnID );
checkInputEmpty( );
inputEmptyChange = inputEmptyStart != inputEmpty;
} );
// animation events
$this.focus( onFocus );
$this.blur( offFocus );
$this.hover( onHover, offHover );
label.hover( onHover, offHover );
} );
} );
</script>
</head>
<body>
<form>
<p><label for="first-name">First name</label><input type="text" id="first-name" />
<label for="last-name">Last name</label><input type="text" id="last-name" /></p>
<p><label for="street">Street</label><input type="text" id="street" /></p>
<p><label for="city">City</label><input type="text" id="city" />
<label for="state">State</label><input type="text" id="state" />
<label for="zip">Zip</label><input type="text" id="zip" /></p>
</form>
<div id="message">
</div>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
