jquery仿百度新首頁網址導航和text輸入框文字自動補全功能代碼



173 688 230



特效描述:百度網址導航 輸入框文字 自動補全功能,簡單的仿了一下百度新首頁的頁面,頁面帶輸入框自動補全插件,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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表