jQuery實(shí)現(xiàn)感應(yīng)鼠標(biāo)動(dòng)畫(huà)效果自動(dòng)伸長(zhǎng)的輸入框?qū)嵗?/h1>
更新時(shí)間:2015年02月24日 10:46:45 作者:代碼家園
這篇文章主要介紹了jQuery實(shí)現(xiàn)感應(yīng)鼠標(biāo)動(dòng)畫(huà)效果自動(dòng)伸長(zhǎng)的輸入框,實(shí)例分析了jQuery鼠標(biāo)事件及animate動(dòng)畫(huà)效果的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)感應(yīng)鼠標(biāo)動(dòng)畫(huà)效果自動(dòng)伸長(zhǎng)的輸入框。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
復(fù)制代碼 代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery實(shí)現(xiàn)感應(yīng)鼠標(biāo)動(dòng)畫(huà)效果自動(dòng)伸長(zhǎng)的輸入框</title>
<script type="text/javascript" src="/images/jquery-1.4.2.min.js"></script>
<style type="text/css">
body
{
margin:0; padding:0; font-size:12px;
}
a:link {
color:#1553a9; text-decoration: none;
}
a:visited {
text-decoration:none; color: #1553a9;
}
a:hover {
text-decoration:none; color: #f46662;
}
a:active {
text-decoration: none; color:#f46662;
}
#main
{
width:500px; margin:0 auto; margin-top:100px;
}
#de
{
display:block;width:100px; height:30px; line-height:30px; float:right; border:#b7b7b7 1px solid; padding-left:5px; border-right:0;
}
#go
{
width:30px; float:right;height:22px; border:#b7b7b7 1px solid; border-left:0; padding-top:10px; padding-left:15px; background-color:#464646; cursor:pointer; color:#FFFFFF;
}
</style>
<script type="text/javascript">
$(function(){
$("#de").mouseover(function(){
$("#de").animate({"width":"250px"});
}).mouseout(function(){
$("#de").animate({"width":"100px"});
});
});
</script>
</head>
<body>
<div id="main">
<div id="ss"><div id="go">→</div><input type="text" id="de"/></div>
</div>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:- 詳解jQuery UI庫(kù)中文本輸入自動(dòng)補(bǔ)全功能的用法
- jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
- jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能
- jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過(guò)濾的方法
- PHP結(jié)合jQuery.autocomplete插件實(shí)現(xiàn)輸入自動(dòng)完成提示的功能
- 基于jQuery的input輸入框下拉提示層(自動(dòng)郵箱后綴名)
- 基于jquery實(shí)現(xiàn)的類似百度搜索的輸入框自動(dòng)完成功能
- 基于jQuery的輸入框無(wú)值自動(dòng)顯示指定數(shù)據(jù)的實(shí)現(xiàn)代碼
- jquery判斷字符輸入個(gè)數(shù)(數(shù)字英文長(zhǎng)度記為1,中文記為2,超過(guò)長(zhǎng)度自動(dòng)截?。?/a>
- jQuery 自動(dòng)增長(zhǎng)的文本輸入框?qū)崿F(xiàn)代碼
- jQuery實(shí)現(xiàn)自動(dòng)輸入email、時(shí)間和域名的方法
相關(guān)文章
-
jQuery Ajax async=>false異步改為同步時(shí),解決導(dǎo)致瀏覽器假死的問(wèn)題
今天小編就為大家分享一篇jQuery Ajax async=>false異步改為同步時(shí),解決導(dǎo)致瀏覽器假死的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,一起跟隨小編過(guò)來(lái)看看吧 2019-07-07
-
jQuery live( type, fn ) 委派事件實(shí)現(xiàn)
jQuery 1.3中新增的方法。給所有當(dāng)前以及將來(lái)會(huì)匹配的元素綁定一個(gè)事件處理函數(shù)(比如click事件)。也能綁定自定義事件。 2009-10-10
-
JQuery實(shí)現(xiàn)表格動(dòng)態(tài)增加行并對(duì)新行添加事件
JQuery實(shí)現(xiàn)表格動(dòng)態(tài)增加行,一直保持最下面有多個(gè)空白行。這樣可以避免一次增加太多行可能導(dǎo)致頁(yè)面內(nèi)容太多,反應(yīng)變慢 2014-07-07
-
jQuery獲取radio選中項(xiàng)的值實(shí)例
本文主要介紹jQuery獲取radio選中項(xiàng)的值的方法,希望能幫到大家,有需要的朋友可以參考一下。 2016-06-06
-
jQuery+Ajax實(shí)現(xiàn)無(wú)刷新操作
這篇文章主要介紹了jQuery+Ajax實(shí)現(xiàn)無(wú)刷新操作,分享了采用Ashx+jQuery Ajax實(shí)現(xiàn)“無(wú)刷新登錄”的例子,感興趣的小伙伴們可以參考一下 2016-01-01
-
Jquery Ajax Error 調(diào)試錯(cuò)誤的技巧
jquery在程序開(kāi)發(fā)ajax應(yīng)用程序時(shí)提高了效率,減少了需要兼容性的問(wèn)題,當(dāng)我們?cè)赼jax項(xiàng)目中,遇到ajax異步獲取數(shù)據(jù)出錯(cuò)該怎么解決呢,我們可以通過(guò)捕捉error事件來(lái)獲取出錯(cuò)的信息,本文給大家介紹jquery ajax error調(diào)試錯(cuò)誤的技巧,感興趣的朋友一起學(xué)習(xí)吧 2015-11-11
-
jquery 結(jié)合C#后臺(tái)的數(shù)組對(duì)文章的關(guān)鍵字自動(dòng)添加鏈接的代碼
jquery 結(jié)合C#后臺(tái)的數(shù)組對(duì)文章的關(guān)鍵字自動(dòng)添加鏈接的代碼,需要的朋友可以參考下。 2011-07-07
最新評(píng)論
本文實(shí)例講述了jQuery實(shí)現(xiàn)感應(yīng)鼠標(biāo)動(dòng)畫(huà)效果自動(dòng)伸長(zhǎng)的輸入框。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery實(shí)現(xiàn)感應(yīng)鼠標(biāo)動(dòng)畫(huà)效果自動(dòng)伸長(zhǎng)的輸入框</title>
<script type="text/javascript" src="/images/jquery-1.4.2.min.js"></script>
<style type="text/css">
body
{
margin:0; padding:0; font-size:12px;
}
a:link {
color:#1553a9; text-decoration: none;
}
a:visited {
text-decoration:none; color: #1553a9;
}
a:hover {
text-decoration:none; color: #f46662;
}
a:active {
text-decoration: none; color:#f46662;
}
#main
{
width:500px; margin:0 auto; margin-top:100px;
}
#de
{
display:block;width:100px; height:30px; line-height:30px; float:right; border:#b7b7b7 1px solid; padding-left:5px; border-right:0;
}
#go
{
width:30px; float:right;height:22px; border:#b7b7b7 1px solid; border-left:0; padding-top:10px; padding-left:15px; background-color:#464646; cursor:pointer; color:#FFFFFF;
}
</style>
<script type="text/javascript">
$(function(){
$("#de").mouseover(function(){
$("#de").animate({"width":"250px"});
}).mouseout(function(){
$("#de").animate({"width":"100px"});
});
});
</script>
</head>
<body>
<div id="main">
<div id="ss"><div id="go">→</div><input type="text" id="de"/></div>
</div>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- 詳解jQuery UI庫(kù)中文本輸入自動(dòng)補(bǔ)全功能的用法
- jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
- jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能
- jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過(guò)濾的方法
- PHP結(jié)合jQuery.autocomplete插件實(shí)現(xiàn)輸入自動(dòng)完成提示的功能
- 基于jQuery的input輸入框下拉提示層(自動(dòng)郵箱后綴名)
- 基于jquery實(shí)現(xiàn)的類似百度搜索的輸入框自動(dòng)完成功能
- 基于jQuery的輸入框無(wú)值自動(dòng)顯示指定數(shù)據(jù)的實(shí)現(xiàn)代碼
- jquery判斷字符輸入個(gè)數(shù)(數(shù)字英文長(zhǎng)度記為1,中文記為2,超過(guò)長(zhǎng)度自動(dòng)截?。?/a>
- jQuery 自動(dòng)增長(zhǎng)的文本輸入框?qū)崿F(xiàn)代碼
- jQuery實(shí)現(xiàn)自動(dòng)輸入email、時(shí)間和域名的方法
相關(guān)文章
jQuery Ajax async=>false異步改為同步時(shí),解決導(dǎo)致瀏覽器假死的問(wèn)題
今天小編就為大家分享一篇jQuery Ajax async=>false異步改為同步時(shí),解決導(dǎo)致瀏覽器假死的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,一起跟隨小編過(guò)來(lái)看看吧2019-07-07
jQuery live( type, fn ) 委派事件實(shí)現(xiàn)
jQuery 1.3中新增的方法。給所有當(dāng)前以及將來(lái)會(huì)匹配的元素綁定一個(gè)事件處理函數(shù)(比如click事件)。也能綁定自定義事件。2009-10-10
JQuery實(shí)現(xiàn)表格動(dòng)態(tài)增加行并對(duì)新行添加事件
JQuery實(shí)現(xiàn)表格動(dòng)態(tài)增加行,一直保持最下面有多個(gè)空白行。這樣可以避免一次增加太多行可能導(dǎo)致頁(yè)面內(nèi)容太多,反應(yīng)變慢2014-07-07
jQuery獲取radio選中項(xiàng)的值實(shí)例
本文主要介紹jQuery獲取radio選中項(xiàng)的值的方法,希望能幫到大家,有需要的朋友可以參考一下。2016-06-06
jQuery+Ajax實(shí)現(xiàn)無(wú)刷新操作
這篇文章主要介紹了jQuery+Ajax實(shí)現(xiàn)無(wú)刷新操作,分享了采用Ashx+jQuery Ajax實(shí)現(xiàn)“無(wú)刷新登錄”的例子,感興趣的小伙伴們可以參考一下2016-01-01
Jquery Ajax Error 調(diào)試錯(cuò)誤的技巧
jquery在程序開(kāi)發(fā)ajax應(yīng)用程序時(shí)提高了效率,減少了需要兼容性的問(wèn)題,當(dāng)我們?cè)赼jax項(xiàng)目中,遇到ajax異步獲取數(shù)據(jù)出錯(cuò)該怎么解決呢,我們可以通過(guò)捕捉error事件來(lái)獲取出錯(cuò)的信息,本文給大家介紹jquery ajax error調(diào)試錯(cuò)誤的技巧,感興趣的朋友一起學(xué)習(xí)吧2015-11-11
jquery 結(jié)合C#后臺(tái)的數(shù)組對(duì)文章的關(guān)鍵字自動(dòng)添加鏈接的代碼
jquery 結(jié)合C#后臺(tái)的數(shù)組對(duì)文章的關(guān)鍵字自動(dòng)添加鏈接的代碼,需要的朋友可以參考下。2011-07-07

