這是一款炫酷的jQuery和CSS3表單浮動(dòng)標(biāo)簽特效。浮動(dòng)標(biāo)簽是指輸入框中的文字或占位文本在輸入框聚焦的時(shí)候，以動(dòng)畫的方式浮動(dòng)到指定的地方。浮動(dòng)標(biāo)簽特效是一種新穎時(shí)尚的動(dòng)畫特效，不僅效果很酷，而且能以明確的方式提示用戶該輸入框應(yīng)該填寫上面內(nèi)容，用戶體驗(yàn)非常不錯(cuò)。

這個(gè)浮動(dòng)標(biāo)簽特效中共有4種不同的動(dòng)畫效果。分別是Fieldset樣式的浮動(dòng)標(biāo)簽，使用font-size來(lái)動(dòng)畫的浮動(dòng)標(biāo)簽，使用CSS3 transforms和jquery easing來(lái)動(dòng)畫的浮動(dòng)標(biāo)簽和透明度動(dòng)畫浮動(dòng)標(biāo)簽。

使用方法

HTML結(jié)構(gòu)

這4中浮動(dòng)標(biāo)簽的HTML結(jié)構(gòu)都使用

嵌套結(jié)構(gòu)，在中放置元素和它的標(biāo)簽元素，外層使用表單form包裹起來(lái)。

First Name

Email

CSS樣式

每一中浮動(dòng)標(biāo)簽的CSS樣式各不相同，來(lái)看看第一種浮動(dòng)標(biāo)簽的設(shè)計(jì)方式。第一種浮動(dòng)標(biāo)簽方式使用的是Fieldset，在輸入框聚焦的時(shí)候，占位文本會(huì)浮動(dòng)到Filedset上面。為了美觀，整個(gè)效果還添加了一層包裹元素以及一個(gè)h2文本作為大標(biāo)題。為元素添加一些節(jié)本樣式：

main {

width: 500px; margin: 0 auto; padding-bottom: 10px;

background: white; border-radius: 3px; overflow: hidden;

}

main h2 {

font-size: 24px; font-weight: normal;

background: hsl(120, 40%, 95%); color: hsl(120, 40%, 40%);

text-align: center;

padding: 20px 0; margin-bottom: 40px;

}

form表單中的div設(shè)置為相對(duì)定位。div中的input和label元素設(shè)置相同的寬度、高度和行高。在高度設(shè)置上，為了修補(bǔ)Firefox瀏覽器的一個(gè)小bug，使用一個(gè)計(jì)算公式來(lái)獲取高度。height = 24(lineheight) + 10*2(padding) + 2(border)。

.flp input, .flp label {

width: 400px; display: block;

font: inherit; font-size: 16px; line-height: 24px;

/*fixed height for FF line height issue.

height = 24(lineheight) + 10*2(padding) + 2(border)*/

height: 46px;

border: 1px solid #999;

}

然后input和label元素分別設(shè)置各自的不同樣式，label元素需要?jiǎng)赢?#xff0c;設(shè)置為絕對(duì)定位方式，并且它的左右padding要比上下padding少2個(gè)像素，因?yàn)楹竺嫘枰鰡蝹€(gè)文字的動(dòng)畫，在.ch中會(huì)補(bǔ)足這2個(gè)像素。

最后是實(shí)際的動(dòng)畫效果的CSS樣式。插件初始化的時(shí)候，會(huì)將所有的字母單獨(dú)使用包裹起來(lái)，做成一個(gè)一個(gè)的單獨(dú)字母。在輸入框聚焦的時(shí)候，js代碼會(huì)為輸入框元素添加.focussed class。實(shí)際的字母浮動(dòng)動(dòng)畫是通過(guò)jquery.easing來(lái)完成的。

/*label styles*/

.ch {

display: block; float: left;

position: relative; /*for upward animation*/

background: white;

}

.ch:first-child {padding-left: 2px;}

.ch:last-child {padding-right: 2px;}

/*active input label*/

.focussed {

/*when any input is already focussed clicking on it(label) again won't do anything*/

pointer-events: none;

}

JAVASCRIPT

該浮動(dòng)標(biāo)簽效果中使用jquery.easing來(lái)完成實(shí)際的動(dòng)畫特效。首先，插件在初始化時(shí)將每一個(gè)輸入框中的文字打散為單個(gè)的字母，每一個(gè)字母都用元素來(lái)包裹起來(lái)。接下來(lái)當(dāng)輸入框聚焦的時(shí)候，使用jquery.easing來(lái)完成字母的浮動(dòng)動(dòng)畫特效。

//breakdown the labels into single character spans

$(".flp label").each(function(){

var sop = ''; //span opening

var scl = ''; //span closing

//split the label into single letters and inject span tags around them

$(this).html(sop + $(this).html().split("").join(scl+sop) + scl);

//to prevent space-only spans from collapsing

$(".ch:contains(' ')").html("?");

})

var d;

//animation time

$(".flp input").focus(function(){

//calculate movement for .ch = half of input height

var tm = $(this).outerHeight()/2 *-1 + "px";

//label = next sibling of input

//to prevent multiple animation trigger by mistake we will use .stop() before animating any character and clear any animation queued by .delay()

$(this).next().addClass("focussed").children().stop(true).each(function(i){

d = i*50;//delay

$(this).delay(d).animate({top: tm}, 200, 'easeOutBack');

})

})

$(".flp input").blur(function(){

//animate the label down if content of the input is empty

if($(this).val() == "")

{

$(this).next().removeClass("focussed").children().stop(true).each(function(i){

d = i*50;

$(this).delay(d).animate({top: 0}, 500, 'easeInOutBack');

})

}

})

其它幾個(gè)效果的CSS和JS都分別寫在了HTML文件中，原理基本相同，你可以下載來(lái)自行研究。

總結(jié)

以上是生活随笔為你收集整理的html浮动炫酷样式,jQuery和CSS3炫酷表单浮动标签特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。