本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框。分享给大家供大家参考。具体实现方法如下：
复制代码 代码如下:<!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实现感应鼠标动画效果自动伸长的输入框</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程序设计有所帮助。
您可能感兴趣的文章:
- 详解jQuery UI库中文本输入自动补全功能的用法
- jQuery实现文本框邮箱输入自动补全效果
- jquery 实现输入邮箱时自动补全下拉提示功能
- jquery.fastLiveFilter.js实现输入自动过滤的方法
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- 基于jQuery的输入框无值自动显示指定数据的实现代码
- jquery判断字符输入个数（数字英文长度记为1，中文记为2，超过长度自动截取）
- jQuery 自动增长的文本输入框实现代码
- jQuery实现自动输入email、时间和域名的方法
