<!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> <br>第一次运行本代码,请刷新一下本页面先~~<br>所需js文件:<a href="/images/jquery-1.4.2.min.js">jquery-1.4.2.min.js</a><hr> 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:源码爱好者</font></p> 运行代码 复制代码 另存代码 提示:可以先修改部分代码后再运行 转载请注明:代码家园 » jQuery实现感应鼠标动画效果自动伸长的输入框 继续浏览有关 的文章 上一篇:复选框(checkbox)全选/全不选/反选 下一篇:没有了 相关代码 JS实现很酷的EMAIL地址添加功能 JS控制超过长度限制后自动跳转下一款文本框 JS+CSS打造实用的单击输入框弹出选择框特效 JS实现自适应高度的表单文本框 + 两种Select下拉列表跳转菜单 + CSS+JS仿类似新浪微博搜索框的特效 + jQuery仿googleDocs在线文档的表格插入特效 + CSS美化的按钮样式,感应鼠标更换边框颜色 + 复选框限制,超过限制即弹出警告框 + 只能点击一次的按钮,提交后变成灰色不可再次 + JS+CSS实现可以凹陷显示选中的单元格 + jQuery+css模拟select控件的左边移动到右边的功能 + CSS+JS模拟类似新浪微博搜索框的搜索提示特效 + JS控制消除文本框中的空格符号 + 多种颜色边框的表格单元格 + 动态适时高亮显示选中单选按钮的颜色