您好,欢迎来到知高教育。
搜索
您的当前位置:首页输入框点击后增大_html/css

输入框点击后增大_html/css

来源:知高教育


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


回复讨论(解决方案)

需要用jquery,

$('#输入框ID').click(function(){ $("#输入框ID").animate({ width: "200px", height: "50px", fontSize: "18px", borderWidth: "2px" }, 1000 );});//具体数值你根据你自己的要求来

背景图是一个道理的

需要用jquery,
JScript code

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






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





nav












#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 里面了

$().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
}
);
});

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

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

Copyright © 2019- zgia.cn 版权所有

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务