代码如下
[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仿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]
随机文章
破解联通（网通）宽带我世界帐号
新浪sae服务器故障,svn无法正常工作
android手机刷机精灵
分享一个java做的五子棋
Java基础第十一讲：面向对象基础（五）
用java swing画直升飞机
相关文章
取消simlple-m主题的首页伸缩效果
searchpath让你的网站在当前直接显示搜索结果
苹果的chromebook
jQuery网格插件ParamQuery
事实证明百度收录道招网内容神速
jQuery boxy弹出层插件简介
相关文章
吐槽
自用Angularjs开发环境搭建（国内通用）
搭建VPS
本人用的是搬瓦工的$9.99/y套装，可以用软件putty或者官网kiwivm控制台的里面的Root Shell Interactive连接主机，
搭建shadowsocks环境
按照如下步骤：
wget --no-check-certificate https:
吐槽
制作省份城市选择列表
利用dom技术将省份和城市列表项逐一输出，并且假设设置的有默认省份和城市，能直接选中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>城市列
吐槽
PHP版Google People API的坑
最近在学习Google People API，先看的PHP版的，当GET https://people.googleapis.com/v1/people/me 的时候，想指定获取的内容，比如person.names,person.phoneNumbers，谷歌提供的接口是传入一个数组Query pa