输入框点击后增大

我自是年少-韶华倾负 2012-07-31 01:44:05

如题，输入框点击后增大，主要是增大的时候输入框的背景图片在变大的时候要有一个滑动的过程。

...全文

227 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

d945332077 2012-07-31

打赏
举报

size你可以自己定义增加多少宽度是在以前的宽度上增加

我自是年少-韶华倾负 2012-07-31

打赏
举报

点击变大的话宽度在哪里定义呢

d945332077 2012-07-31

打赏
举报

$().ready(function(e) {
var w = $("#search_input").width();
var h = $("#search_input").height();
$("#search_input").focus(function() {
var me = $(this);
var size = 5;
me.animate(
{
width : w+size,
height : h+size
}
);
}).blur(function() {
$(this).animate(
{
width : w,
height: h
}
);
});

我自是年少-韶华倾负 2012-07-31

打赏
举报

<!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>nav</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/search.js"></script>
</head>
<body>
<div id="search">
<input name="" type="text" id="search_input" /><input name="" type="button" class="search_button" />
</div>
</body>
</html>

#search{ float:right; height:26px;padding:9px 20px 0 0;}
#search_input{background:url(../imagegs/01.png) no-repeat left top;padding:2px 0 2px 12px;height:22px;line-height:22px; float:left;color:#fff;}
.search_button{ float:left; width:37px; height:26px;background:url(../imagegs/01.png) no-repeat right top; cursor:pointer;}

我把上面的 jquery 写到 search.js 里面了

我自是年少-韶华倾负 2012-07-31

打赏
举报

<div id="search">
<input name="" type="text" id="search_input" /><input name="" type="button" class="search_button" />
</div>

能写一个详细的么刚才我做了个尝试但是没效果不知道为什么

86y 2012-07-31

打赏
举报

[Quote=引用 1 楼的回复:]

需要用jquery，
JScript code

$('#输入框ID').click(function(){ $("#输入框ID").animate({
width: "200px",
height: "50px",
fontSize: "18px",
borderWidth: "2px"
}, 1000 );});
//具体数值你根据你自己的要求……
[/Quote]
是对的。。一般CSS3支持动画。。如果不支持只能用JS来写了。以上JS可用！

竹贤侄 2012-07-31

打赏
举报

背景图是一个道理的

竹贤侄 2012-07-31

打赏
举报

需要用jquery，



$('#输入框ID').click(function(){  $("#输入框ID").animate({ 

    width: "200px",

    height: "50px", 

    fontSize: "18px", 

    borderWidth: "2px"

  }, 1000 );});

//具体数值你根据你自己的要求来