道招

分享jquery仿apple官网伸缩弹性搜索框

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

分享jquery仿apple官网伸缩弹性搜索框

代码如下 [code lang="php"] <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jquery仿apple官网伸缩弹性搜索框</title> <script type="text/javascript" src="jquery.min.js"></script> <style> *{ margin:0; padding:0;} .clear { clear:both;} .bar { width:1002px; height:36px; margin:100px auto; background:#000;} ul,li {list-style:none; margin:0; padding:0;} .nav {float:left;height:36px;overflow:hidden;} .nav li {float:left; height:36px; line-height:36px; width:102px; overflow:hidden; border-right:1px #555 solid;} .nav li a { font-family:Arial; font-size:14px;display:block; padding:0px 10px; text-decoration:none; text-align:center;color:#fff;} .nav li a:hover {background:#f60} .searchbox { float:right;height:36px; padding-right:10px;} .search_box {height:20px; margin-top:6px;} .search {height:20px; line-height:20px;padding:0px 10px; border:1px #ddd solid; background:#fff;outline: none; width:100px;} </style> <script type="text/javascript"> $(document).ready(function(){ $(".search").focus(function(){ $(this).stop(true,false).animate({width:"200px"},"slow"); var navwidth = 720; var liwidth = navwidth/8; $("ul.nav li").animate({width:liwidth+"px"},"slow"); }) .blur(function(){ $(this).animate({width:"100px"},"slow"); var navwidth = 820; var liwidth = navwidth/8; $("ul.nav li").animate({width:liwidth+"px"},"slow"); }); //动态生成导航栏目的宽度 }); </script> </head> <body> <div class="bar"> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Works</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Mircblog</a></li> <li><a href="#">DJmusic</a></li> </ul> <div class="searchbox"> <form class="search_box" action="http://www.baidu.com/s" target="_blank"> <input class="search" type="text" name="wd" id="kw" value="搜索" /> </form> </div> <div class="clear"></div> </div> </body> </html> [/code] jquery
更新时间:
上一篇:真的可以直接在Windows中运行原生Android4.0系统,下一篇:2013年最值得关注的网页设计趋势

相关文章

jQuery boxy弹出层插件简介

使用该jQuery插件 要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector",例如:"a[ 阅读更多…

[转载]JQuery实现页面随滚动条滚动而动态加载内容的效果

新浪微博有这个功能,刚才思考一下 ,简单的写了一下实现方法,代码是Js的. 无可否认,这种方式应该算是web2.0的产物,在用户体验上具备很好的感受,除了微博在使用该方式外,另外我还发现有几个其 阅读更多…

10个JQuery插件

与大家分享的是10款最新收集的 jQuery 插件,有文本效果,地图,表单和表格等等。这些作者的想法特别新颖,希望你能从中找到自己需要的插件。   1. DataTables Column Filte 阅读更多…

jQuery网格插件ParamQuery

ParamQuery是一种轻量级的jQuery网格插件,基于用于用户界面控制、具有一致API的优秀设计模式 jQueryUI Widget factory 创建,能够在网页上展示各种类似于Excel和 阅读更多…

谷歌,你快回来吧

不是我不想用谷歌搜索,自从你蜗居香港之后,我时常登录www.google.com.hk登录不了,有时候能登录,等我把结果搜索出来了又会经常出现进不去的事情,只都是因为你对你的搜索结果的网站实现了转向的 阅读更多…

Vue在chrome44偶现点击子元素事件无法冒泡

公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的。 现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是‘卡’、点不动、点 阅读更多…

关注道招网公众帐号
道招开发者二群