jquery仿百度新首页网址导航和text输入框文字自动补全功能代码



207 827 276



特效描述:百度网址导航 输入框文字 自动补全功能,简单的仿了一下百度新首页的页面,页面带输入框自动补全插件,tab切换等。兼容性还没测。如有什么问题欢迎提出。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/common.css"/>

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.autocomplete.min.js"></script>

3. HTML代码

	<div id="wrapper">
		<div class="skinBg" style="background-image: url('images/65.jpg');"></div>
		<header id="header">
			<div class="weather fl">
				<span class="cityW">
					<span>苏州:</span>
					<span>
						<span class="weatherIcon wI1"></span>
						<span>35 ~ 24℃</span>
					</span>
				</span>
				<span class="sp">|</span>
				<span class="pollution">
					<span>空气质量:83</span>
					<span class="polutionLevel">良</span>
				</span>
				<div class="cityWeather">
				</div>
			</div>
			<nav class="headNavs fr tr">
				<a href="#"><span class="s-icon s-icon-treasure"></span><span>宝箱</span></a>
				<a href="#"><span class="s-icon s-icon-skin"></span><span>换肤</span></a>
				<a href="#"><span class="s-icon s-icon-msg"></span><span>消息</span></a>
				<a><span class="s-icon s-icon-line"></span></a>
				<a href="#"><span>设为首页</span></a>
				<a href="javascript:;" class="uname"><span>审美网</span><span class="user-arrow"></span></a>
				<div class="topMenus dn">
					<span class="arrowTop"></span>
					<a href="#">个人中心</a>
					<a href="#">帐号设置</a>
					<a href="#">搜索设置</a>
					<a href="#">意见反馈</a>
					<a href="#">首页教程</a>
					<a href="#">安全退出</a>
				</div>
			</nav>
		</header>
		<div class="content tc">
			<p class="logo"><img width="270" height="129" src="images/logo_white.png" alt="logo" /></p>
			<nav class="mainNavs">
				<a href="#">新闻</a>
				<a href="#">网页</a>
				<a href="#">贴吧</a>
				<a href="#">知道</a>
				<a href="#">音乐</a>
				<a href="#">图片</a>
				<a href="#">视频</a>
				<a href="#">地图</a>
				<a href="#">百科</a>
				<a href="#">文库</a>
				<a href="#">更多&gt;&gt;</a>
			</nav>
			<div class="searchBox">
				<form action="">
					<input type="text" class="searchIpt f14" name="wd" maxlength="100" autocomplete="off"/>
					<input type="submit" class="btn cp" value="百度一下" />
				</form>
			</div>
			<div class="mainContents oh">
				<div class="menusWrapper fl">
					<a class="active" href="javascript:;">导航</a>
					<a href="javascript:;">新闻</a>
					<a href="javascript:;">世界杯</a>
					<a href="javascript:;">音乐</a>
					<a href="javascript:;">团购</a>
				</div>
				<div class="ctnerWrapper">
					<div class="ctnerBox">
						<div id="cbox-1" class="cbox tl dn">
							<div class="ctnerTab pr tc">
								<a href="#">我的导航</a> <a href="#" class="on">推荐导航</a>
							</div>
							<div class="myNavs rtNavs dn pt15">
								<div class="navTitle fl">我的导航</div>
								<div class="navArea oh">
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/101.png" alt="" /></a>
								</div>
							</div>
							<div class="hotNavs rtNavs dn oh pt15">
								<div class="navTitle fl">热门网址</div>
								<div class="navArea oh">
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/101.png" alt="" /></a>
									<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/102.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/103.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/104.png" alt="" /></a>
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/20.png" alt="" /></a>
									<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/106.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/107.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/108.png" alt="" /></a>
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/109.png" alt="" /></a>
									<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/110.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/111.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/112.png" alt="" /></a>
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/113.png" alt="" /></a>
									<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/114.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/115.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/116.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/12.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/117.png" alt="" /></a>
								</div>
							</div>
						</div>
						<div id="cbox-2" class="cbox tl dn">
							<div class="newsBox oh">
								<div class="sliderBox fl">
									<div class="slider">
										<a href="#" target="_blank" class="picLink active">
											<img width="425" height="260" src="images/news1.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">哈尔滨江边出现涉黄服务"老头乐"</span>
										</a>
										<a href="#" target="_blank" class="picLink">
											<img width="425" height="260" src="images/news2.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">新闻标题2</span>
										</a>
										<a href="#" target="_blank" class="picLink">
											<img width="425" height="260" src="images/news3.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">新闻标题3</span>
										</a>
										<a href="#" target="_blank" class="picLink">
											<img width="425" height="260" src="images/news4.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">新闻标题4</span>
										</a>
										<a href="#" target="_blank" class="picLink">
											<img width="425" height="260" src="images/news5.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">新闻标题5</span>
										</a>
									</div>
									<div class="smallPics">
										<a class="active"><img width="68" height="40" src="images/news1.jpg" alt="" /></a>
										<a><img width="68" height="40" src="images/news2.jpg" alt="" /></a>
										<a><img width="68" height="40" src="images/news3.jpg" alt="" /></a>
										<a><img width="68" height="40" src="images/news4.jpg" alt="" /></a>
										<a><img width="68" height="40" src="images/news5.jpg" alt="" /></a>
									</div>
								</div>
								<div class="topic">
									<div class="topicTop">
										<span class="titleWords titleT on"><a href="javascript:;">搜索风云榜</a></span>
										<span class="titleTopic titleT"><a href="javascript:;">热门话题</a></span>
										<a class="changeWords" href="javascript:;">换一换</a>
									</div>
									<div class="topicList">
										<div class="wBox topicB dn">
											<ul>
												<li><a target="_blank" href="#">男子入教当卧底救妻</a></li>
												<li><a target="_blank" href="#">广西无人海岛售14...</a></li>
												<li><a target="_blank" href="#">北京大雨</a></li>
												<li><a target="_blank" href="#">世界杯星太太团</a></li>
												<li><a target="_blank" href="#">13岁印度女孩登顶珠...</a></li>
												<li><a target="_blank" href="#">dnf职业联赛半决赛</a></li>
												<li><a target="_blank" href="#">疑似mh370坠毁噪音</a></li>
												<li><a target="_blank" href="#">李保田儿子</a></li>
												<li><a target="_blank" href="#">6城试点共有产权房</a></li>
												<li><a target="_blank" href="#">陕西推土机毁燕子窝</a></li>
												<li><a target="_blank" href="#">老师住深山出高考题</a></li>
												<li><a target="_blank" href="#">越方冲撞中方船只1200次</a></li>
												<li><a target="_blank" href="#">星空日记</a></li>
												<li><a target="_blank" href="#">肉饼店老板因相貌引围观...</a></li>
												<li><a target="_blank" href="#">高圆圆结婚</a></li>
												<li><a target="_blank" href="#">诺曼底登陆</a></li>
											</ul>
										</div>
										<div class="tBox topicB dn">
											<ul>
												<li><a target="_blank" href="#">话题11111</a></li>
												<li><a target="_blank" href="#">话题22222</a></li>
												<li><a target="_blank" href="#">话题33333</a></li>
												<li><a target="_blank" href="#">话题44444</a></li>
												<li><a target="_blank" href="#">话题55555</a></li>
												<li><a target="_blank" href="#">话题66666</a></li>
												<li><a target="_blank" href="#">话题77777</a></li>
												<li><a target="_blank" href="#">话题88888</a></li>
												<li><a target="_blank" href="#">话题99999</a></li>
												<li><a target="_blank" href="#">话题11111</a></li>
												<li><a target="_blank" href="#">话题22222</a></li>
												<li><a target="_blank" href="#">话题33333</a></li>
												<li><a target="_blank" href="#">话题44444</a></li>
												<li><a target="_blank" href="#">话题55555</a></li>
												<li><a target="_blank" href="#">话题66666</a></li>
												<li><a target="_blank" href="#">话题77777</a></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="cbox-3" class="cbox tl dn">
							<p class="pt15 tc f14">4,其他这几个 这里就忽略掉了!意思意思算了...</p>
						</div>
						<div id="cbox-4" class="cbox tl dn">
							<p class="pt15 tc f14">5,其他这几个这里就忽略掉了!意思意思算了...</p>
						</div>
						<div id="cbox-5" class="cbox tl dn">
							<p class="pt15 tc f14">6,其他这几个这里就忽略掉了!意思意思算了...</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer id="footer" class="tc">©2014 Baidu 使用百度前必读 京ICP证030173号</footer>
	</div>
	<script>
		$('.uname,.topMenus').hover(function(){
			$('.topMenus').stop(true,true).fadeIn(200);
		},function(){
			$('.topMenus').stop(true,true).delay(500).fadeOut(200);
		});
		//搜索框自动补全; 文档地址:http://autocomplete.jiani.info/doc/
		$('.searchIpt').AutoComplete({
            'data': ['About Me', '审美网', 'abcdefg', 'One', 'Two', 'Three', 'Four', 'Five', 'Six','smwell.com', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
            'itemHeight': 24,
            'width': 529
        }).AutoComplete('show');
		$('.ctnerTab a').click(function(){
			if(!$(this).hasClass('on')){
				$('.ctnerTab a').removeClass('on').eq($(this).index()).addClass('on');
				$('.rtNavs').stop(true,true).hide(200).eq($(this).index()).show(300);
			}
		});
		$('.menusWrapper a').click(function(){
			if(!$(this).hasClass('active')){
				$('.menusWrapper a').removeClass('active').eq($(this).index()).addClass('active');
				$('.cbox').stop(true,true).animate({top:318},100).hide().eq($(this).index()).animate({top:0},400).show();
			}
		});
		$('.smallPics a').click(function(){
			if(!$(this).hasClass('active')){
				$('.smallPics a').removeClass('active').eq($(this).index()).addClass('active');
				$('.picLink').stop(true,true).removeClass('active').eq($(this).index()).addClass('active');
			}
		});
		$('.titleT').hover(function(){
			if(!$(this).hasClass('on')){
				$('.titleT').removeClass('on').eq($(this).index()).addClass('on');
				$('.topicB').stop(true,true).hide().eq($(this).index()).show();
			}
		});
	</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片头像上传 二级导航菜单 文件上传 下拉导航菜单 文本框 竖直导航菜单 下拉框 图标导航菜单 复选 固定导航菜单 单选 侧边导航菜单 登录框 树形导航菜单 注册框 网址导航菜单 搜索框 导航菜单插件 验证码 文字导航菜单 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 切换按钮 form表单 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到