欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jQuery實(shí)現(xiàn)仿百度首頁(yè)選項(xiàng)卡切換效果

 更新時(shí)間：2016年05月29日 15:12:42   作者：roucheng  
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)仿百度首頁(yè)選項(xiàng)卡切換效果的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下

以下代碼比較簡(jiǎn)單，所以沒(méi)給大家附太多的注釋，有問(wèn)題歡迎給我留言，具體詳情請(qǐng)看下文代碼吧。

先給大家展示下效果圖：

代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿百度首頁(yè)選項(xiàng)卡切換效果 - 何問(wèn)起</title>
<base target="_blank" />
<style type="text/css">
body {
background: url(http://hovertree.com/texiao/jquery/71/images/65.jpg) no-repeat fixed center center;
}
.hovertreepage .clear {
clear: both;
}
.hovertreepage {
margin: 200px auto 0 auto;
width: 700px;
height: 300px;
}
.hovertreepage .left, .hovertreepage .right {
float: left;
}
.hovertreepage .nav-back {
width: 60px;
height: 300px;
background: #000;
opacity: .3;
filter: alpha(opacity=30);
}
.hovertreepage .nav {
position: relative;
margin-top: -300px;
width: 60px;
text-align: center;
font-size: 14px;
font-family: "微軟雅黑";
color: #fff;
}
.hovertreepage .nav div {
height: 32px;
line-height: 28px;
cursor:pointer;
}
.hovertreepage .nav div.on {
background: #0094ea;
}
.hovertreepage .right {
width: 620px;
height: 300px;
margin-left: 20px;
}
.hovertreepage .content-back {
width: 620px;
height: 300px;
background: #fff;
opacity: .3;
}
.hovertreepage .content {
position: relative;
width: 600px;
height: 280px;
margin-top: -300px;
padding: 10px;
overflow: hidden;
}
.hovertreepage .content a{color:blue;}
.hovertreepage .content div {
width: 600px;
height: 280px;
margin-bottom: 10px;
background: #fff;
}
</style>
</head>
<body>
<div class="hovertreepage">
<div class="left">
<div class="nav-back"></div>
<div class="nav">
<div class="on">導(dǎo)航</div>
<div>新聞</div>
<div>世界杯</div>
<div>音樂(lè)</div>
<div>彩票</div>
</div>
</div>
<div class="right">
<div class="content-back"></div>
<div class="content">
<div>1 <a >首頁(yè)</a> <a >特效</a> <a >原文</a>
</div>
<div>2 </div>
<div>3 <a >服裝店風(fēng)云</a> 自從接觸編程以后，興趣就一直有增無(wú)減。</div>
<div>4 <a >jQuery全部版本下載</a>
時(shí)間就是金錢(qián)，效率就是生命。
</div>
<div>5 <a ><img src="http://hovertree.com/hvtimg/bjafjd/wmt3mxd7.png" alt="孫悟空" /></a></div>
</div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(".hovertreepage .nav div").mouseenter(function () {
var $this = $(this);
var index = $this.index();
}).mouseleave(function () {
var $this = $(this);
var index = $this.index();
}).click(function () {
var $this = $(this);
var index = $this.index();
var l = -(index * 290);
$(".hove"+"rtreepage .nav div").removeClass("on");
$(".hovertreepage .nav div").eq(index).addClass("on");
$(".hovertreepage .content div:eq(0)").stop().animate({ "margin-top": l }, 500);
});
</script>
</body>
</html>

以上內(nèi)容是小編給大家介紹的基于jQuery實(shí)現(xiàn)仿百度首頁(yè)選項(xiàng)卡切換效果，希望對(duì)大家有所幫助！

相關(guān)文章

  • jQuery mobile 移動(dòng)web(6)

    jQuery mobile 移動(dòng)web(6)

    這篇文章主要介紹了jQuery mobile 移動(dòng)web(6)的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • jQuery插件Zclip實(shí)現(xiàn)完美兼容個(gè)瀏覽器點(diǎn)擊復(fù)制內(nèi)容到剪貼板

    jQuery插件Zclip實(shí)現(xiàn)完美兼容個(gè)瀏覽器點(diǎn)擊復(fù)制內(nèi)容到剪貼板

    本文將結(jié)合實(shí)例講解如何使用一款基于jQuery的插件——Zclip來(lái)實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板的功能。其實(shí)IE上有個(gè)方法可以實(shí)現(xiàn)點(diǎn)擊復(fù)制，但是由于只是IE獨(dú)有，所以我們不提倡。而Zclip是利用一個(gè)隱藏的flash文件來(lái)完成復(fù)制的功能，關(guān)鍵是它兼容當(dāng)前各主流瀏覽器。
    2015-04-04
  • JQuery優(yōu)缺點(diǎn)分析說(shuō)明

    JQuery優(yōu)缺點(diǎn)分析說(shuō)明

    如果你還在猶豫是否要學(xué)習(xí)一個(gè)JavaScript框架，并困惑于選擇哪一個(gè)框架，那么我推薦你選擇jQuery。這并非說(shuō)其它框架不好，只是jQuery可能是最穩(wěn)妥和最具回報(bào)性的選擇。
    2011-04-04
  • ajax更新數(shù)據(jù)后，jquery、jq失效問(wèn)題

    ajax更新數(shù)據(jù)后，jquery、jq失效問(wèn)題

    這問(wèn)題遇到兩次，竟然忘記了。所以說(shuō)不要關(guān)抄人家的方法，要多研究下?，F(xiàn)在做個(gè)記錄...
    2011-03-03
  • jQuery構(gòu)造函數(shù)init參數(shù)分析續(xù)

    jQuery構(gòu)造函數(shù)init參數(shù)分析續(xù)

    其實(shí)樓主的F和jQuery.fn.init是相等的; 實(shí)現(xiàn)功能是和jq一樣的, 只是jq的把構(gòu)造函數(shù)放進(jìn)原型;如果非要說(shuō)原因,個(gè)人理解jq這樣寫(xiě)整體結(jié)構(gòu)清晰,先是入口構(gòu)造函數(shù),緊跟著是原型部分(原型里面init是初始化),但是不好理解;乍一看確實(shí)挺繞, 我也是看了好久才明白怎么回事
    2015-05-05
  • jQuery操作input值的各種方法總結(jié)

    jQuery操作input值的各種方法總結(jié)

    這篇文章主要介紹了jQuery操作input值的各種方法總結(jié)，有需要的朋友可以參考一下
    2013-11-11
  • Jquery選中或取消radio示例

    Jquery選中或取消radio示例

    選中或取消radio在項(xiàng)目中也會(huì)經(jīng)常用到，下面是用jquery實(shí)現(xiàn)radio的選中或取消，感興趣的朋友可以參考下
    2013-09-09
  • jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果

    jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果

    這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • JQERY limittext 插件0.2版(長(zhǎng)內(nèi)容限制顯示)

    JQERY limittext 插件0.2版(長(zhǎng)內(nèi)容限制顯示)

    JQERY limittext 插件為長(zhǎng)內(nèi)容增加一個(gè)顯示更多的功能
    2010-08-08
  • 輪播的簡(jiǎn)單實(shí)現(xiàn)方法

    輪播的簡(jiǎn)單實(shí)現(xiàn)方法

    下面小編就為大家?guī)?lái)一篇輪播的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-07

最新評(píng)論