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



169 675 226



特效描述:百度网址导航 输入框文字 自动补全功能,简单的仿了一下百度新首页的页面,页面带输入框自动补全插件,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>



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


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 收缩菜单 收缩导航 右键菜单 导航切换 菜单切换 浮动菜单 浮动导航 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 切换按钮 表单 表单美化 表单插件 表单美化插件 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 固定导航 固定菜单 网址导航 搜索框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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