jQuery实现感应鼠标动画效果自动伸长的输入框实例
本文实例讲述了jQuery实现感应鼠标动画效果自动伸长的输入框。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jQuery实现感应鼠标动画效果自动伸长的输入框</title>
<scripttype="text/javascript"src="/images/jquery-1.4.2.min.js"></script>
<styletype="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:0auto;margin-top:100px;
}
#de { display:block;width:100px;height:30px;line-height:30px;float:right;border:#b7b7b71pxsolid;padding-left:5px;border-right:0; } #go { width:30px;float:right;height:22px;border:#b7b7b71pxsolid;border-left:0;padding-top:10px;padding-left:15px;background-color:#464646;cursor:pointer;color:#FFFFFF; } </style> <scripttype="text/javascript"> $(function(){
$("#de").mouseover(function(){ $("#de").animate({"width":"250px"}); }).mouseout(function(){ $("#de").animate({"width":"100px"}); }); }); </script> </head> <body> <divid="main"> <divid="ss"><divid="go">→</div><inputtype="text"id="de"/></div> </div> </body> </html>
热门推荐
10 喜得孙子祝福语简短唯美
11 婚礼祝福语简短朴实大众
12 员工周年祝福语大全简短
13 家长回复节日祝福语简短
14 简短生日祝福语老同学
15 夜雨祝福语简短10字
16 蛋糕祝福语简短闺蜜
17 部门过年祝福语简短独特
18 简短精炼的结婚祝福语