Apple.com的搜索棒在点击时会增长?

Eva*_*van 1 css search jquery

有人能够指出一个"类似的"jquery插件的正确方向,例如,可以复制苹果的新搜索棒功能吗?

使用Safari或Chrome时,点击苹果全球导航中的搜索栏会增加尺寸.我想对我的一个项目加入同样的效果.

链接:http://www.apple.com/about/webbadges/

我感谢您的帮助!

埃文

Mar*_*ich 6

我要说自己写吧!它并不像你想象的那么难.这可能有助于您入门:

<html><body>

<style>
#search {
    background-color: #999;
    width: 100px;
    border: 1px solid #ddd;
    outline: none;
}
</style>

<input id="search" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script>
jQuery(function() {
    jQuery('#search').focus(function() {
        jQuery(this).animate({ width: '200px', backgroundColor: '#fff' });
    }).blur(function() {
        jQuery(this).animate({ width: '100px', backgroundColor: '#999' });
    });
});
</script>

</body></html>
Run Code Online (Sandbox Code Playgroud)

  • @Evan - 好的,我已经在http://jsfiddle.net/marke/GNF4T/上发布了包含你的图片的新版本.顺便说一下,如果你喜欢我的答案,如果你把它标记为已接受,我们将不胜感激; - ) (2认同)