<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <meta name="author" content="微普科技 http://www.wiipu.com" /> <title>jquery实现输入框动态搜索样式</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: #ddd; } .zmkt { width: 600px; margin: 20px auto; } input[type=text] { width: 150px; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-position: 10px 10px; padding: 12px 20px 12px 10px; outline: lightblue; } </style> <script src="http://xiguape.wiipu.com/basecode/js/jquery.1.9.1.min.js"></script> <script type="text/javascript"> $(function (){ $("input").focus(function(){ $("input").val("得到焦点时"); $("input").animate({ width:"600", },500) }); $("input").blur(function(){ $("input").val("失去焦点时"); $("input").animate({ width:"150", },500); }) }) </script> </head> <body> <!--提示：使用jquery完成图示效果，输入框得到焦点是， 宽度长度变为100%，动画时间为500，value值为“得到焦点时“， 失去焦点时，输入框变为原始的样式--> <div class="zmkt"> <input type="text" name="text" id="text" value="失去焦点时" /> </div> </body> </html>