一个会自动伸长的输入框jQuery代码

最新推荐文章于 2024-07-24 11:09:48 发布

cuikuang6306

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量141

点赞数

文章标签： xhtml javascript ViewUI

基于jQuery实现的特效，一个会自动伸长的输入框，当把鼠标移上去的时候，输入框就自动变长，好像已经做好了准备等待您的输入，有点人性化的味道，其实这是用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=\"/ajaxjs/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>

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/29737856/viewspace-1225160/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/29737856/viewspace-1225160/

关注