jQuery實現(xiàn)感應(yīng)鼠標(biāo)動畫效果自動伸長的輸入框?qū)嵗?/h1>
更新時間：2015年02月24日 10:46:45 作者：代碼家園
這篇文章主要介紹了jQuery實現(xiàn)感應(yīng)鼠標(biāo)動畫效果自動伸長的輸入框,實例分析了jQuery鼠標(biāo)事件及animate動畫效果的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)感應(yīng)鼠標(biāo)動畫效果自動伸長的輸入框。分享給大家供大家參考。具體實現(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實現(xiàn)感應(yīng)鼠標(biāo)動畫效果自動伸長的輸入框</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>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:- 詳解jQuery UI庫中文本輸入自動補全功能的用法
- jQuery實現(xiàn)文本框郵箱輸入自動補全效果
- jquery 實現(xiàn)輸入郵箱時自動補全下拉提示功能
- jquery.fastLiveFilter.js實現(xiàn)輸入自動過濾的方法
- PHP結(jié)合jQuery.autocomplete插件實現(xiàn)輸入自動完成提示的功能
- 基于jQuery的input輸入框下拉提示層(自動郵箱后綴名)
- 基于jquery實現(xiàn)的類似百度搜索的輸入框自動完成功能
- 基于jQuery的輸入框無值自動顯示指定數(shù)據(jù)的實現(xiàn)代碼
- jquery判斷字符輸入個數(shù)（數(shù)字英文長度記為1，中文記為2，超過長度自動截?。?/a>
- jQuery 自動增長的文本輸入框?qū)崿F(xiàn)代碼
- jQuery實現(xiàn)自動輸入email、時間和域名的方法
相關(guān)文章
-
針對jquery性能優(yōu)化這個主題，想必大家都有所了解。下面是我搜集點一點資料關(guān)于jquery性能優(yōu)化，大家可以參考參考。 2014-05-05
-
jQuery Ajax async=>false異步改為同步時,解決導(dǎo)致瀏覽器假死的問題
今天小編就為大家分享一篇jQuery Ajax async=>false異步改為同步時,解決導(dǎo)致瀏覽器假死的問題，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧 2019-07-07
-
jQuery live( type, fn ) 委派事件實現(xiàn)
jQuery 1.3中新增的方法。給所有當(dāng)前以及將來會匹配的元素綁定一個事件處理函數(shù)（比如click事件）。也能綁定自定義事件。 2009-10-10
-
JQuery實現(xiàn)表格動態(tài)增加行并對新行添加事件
JQuery實現(xiàn)表格動態(tài)增加行，一直保持最下面有多個空白行。這樣可以避免一次增加太多行可能導(dǎo)致頁面內(nèi)容太多，反應(yīng)變慢 2014-07-07
-
本文主要介紹jQuery獲取radio選中項的值的方法，希望能幫到大家，有需要的朋友可以參考一下。 2016-06-06
-
這篇文章主要介紹了jQuery+Ajax實現(xiàn)無刷新操作，分享了采用Ashx+jQuery Ajax實現(xiàn)“無刷新登錄”的例子，感興趣的小伙伴們可以參考一下 2016-01-01
-
Jquery Ajax Error 調(diào)試錯誤的技巧
jquery在程序開發(fā)ajax應(yīng)用程序時提高了效率，減少了需要兼容性的問題，當(dāng)我們在ajax項目中，遇到ajax異步獲取數(shù)據(jù)出錯該怎么解決呢，我們可以通過捕捉error事件來獲取出錯的信息，本文給大家介紹jquery ajax error調(diào)試錯誤的技巧，感興趣的朋友一起學(xué)習(xí)吧 2015-11-11
-
本篇文章給大家詳細分析了用jquery實現(xiàn)放大鏡效果的方法，以及代碼分享，有興趣的學(xué)習(xí)下。 2018-02-02
-
jquery 結(jié)合C#后臺的數(shù)組對文章的關(guān)鍵字自動添加鏈接的代碼
jquery 結(jié)合C#后臺的數(shù)組對文章的關(guān)鍵字自動添加鏈接的代碼，需要的朋友可以參考下。 2011-07-07
-
本文給大家介紹jquery ui tabs的理解,包括屬性、事件、方法和技巧等相關(guān)知識，對jquery ui tabs感興趣的朋友一起學(xué)習(xí)吧 2015-11-11
最新評論
本文實例講述了jQuery實現(xiàn)感應(yīng)鼠標(biāo)動畫效果自動伸長的輸入框。分享給大家供大家參考。具體實現(xiàn)方法如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery實現(xiàn)感應(yīng)鼠標(biāo)動畫效果自動伸長的輸入框</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>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
- 詳解jQuery UI庫中文本輸入自動補全功能的用法
- jQuery實現(xiàn)文本框郵箱輸入自動補全效果
- jquery 實現(xiàn)輸入郵箱時自動補全下拉提示功能
- jquery.fastLiveFilter.js實現(xiàn)輸入自動過濾的方法
- PHP結(jié)合jQuery.autocomplete插件實現(xiàn)輸入自動完成提示的功能
- 基于jQuery的input輸入框下拉提示層(自動郵箱后綴名)
- 基于jquery實現(xiàn)的類似百度搜索的輸入框自動完成功能
- 基于jQuery的輸入框無值自動顯示指定數(shù)據(jù)的實現(xiàn)代碼
- jquery判斷字符輸入個數(shù)（數(shù)字英文長度記為1，中文記為2，超過長度自動截?。?/a>
- jQuery 自動增長的文本輸入框?qū)崿F(xiàn)代碼
- jQuery實現(xiàn)自動輸入email、時間和域名的方法
相關(guān)文章
- 針對jquery性能優(yōu)化這個主題，想必大家都有所了解。下面是我搜集點一點資料關(guān)于jquery性能優(yōu)化，大家可以參考參考。2014-05-05
-
jQuery Ajax async=>false異步改為同步時,解決導(dǎo)致瀏覽器假死的問題
今天小編就為大家分享一篇jQuery Ajax async=>false異步改為同步時,解決導(dǎo)致瀏覽器假死的問題，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧2019-07-07 -
jQuery live( type, fn ) 委派事件實現(xiàn)
jQuery 1.3中新增的方法。給所有當(dāng)前以及將來會匹配的元素綁定一個事件處理函數(shù)（比如click事件）。也能綁定自定義事件。2009-10-10 -
JQuery實現(xiàn)表格動態(tài)增加行并對新行添加事件
JQuery實現(xiàn)表格動態(tài)增加行，一直保持最下面有多個空白行。這樣可以避免一次增加太多行可能導(dǎo)致頁面內(nèi)容太多，反應(yīng)變慢2014-07-07 - 本文主要介紹jQuery獲取radio選中項的值的方法，希望能幫到大家，有需要的朋友可以參考一下。2016-06-06
- 這篇文章主要介紹了jQuery+Ajax實現(xiàn)無刷新操作，分享了采用Ashx+jQuery Ajax實現(xiàn)“無刷新登錄”的例子，感興趣的小伙伴們可以參考一下2016-01-01
-
Jquery Ajax Error 調(diào)試錯誤的技巧
jquery在程序開發(fā)ajax應(yīng)用程序時提高了效率，減少了需要兼容性的問題，當(dāng)我們在ajax項目中，遇到ajax異步獲取數(shù)據(jù)出錯該怎么解決呢，我們可以通過捕捉error事件來獲取出錯的信息，本文給大家介紹jquery ajax error調(diào)試錯誤的技巧，感興趣的朋友一起學(xué)習(xí)吧2015-11-11 - 本篇文章給大家詳細分析了用jquery實現(xiàn)放大鏡效果的方法，以及代碼分享，有興趣的學(xué)習(xí)下。2018-02-02
-
jquery 結(jié)合C#后臺的數(shù)組對文章的關(guān)鍵字自動添加鏈接的代碼
jquery 結(jié)合C#后臺的數(shù)組對文章的關(guān)鍵字自動添加鏈接的代碼，需要的朋友可以參考下。2011-07-07 - 本文給大家介紹jquery ui tabs的理解,包括屬性、事件、方法和技巧等相關(guān)知識，對jquery ui tabs感興趣的朋友一起學(xué)習(xí)吧2015-11-11