输入框点击后增大_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:14:09
原创
1690人浏览过

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

造点AI
造点AI

夸克 · 造点AI

造点AI 325
查看详情 造点AI

回复讨论(解决方案)

需要用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可用!

  


    
  



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

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



nav

<script></script>
<script></script>


  

    
  





#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你可以自己定义增加多少  宽度是在以前的宽度上增加

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号