實現點圖換頁的功能

 

我想搞一個這樣的效果，就是。

用鼠標覆蓋某一個圖標，該圖標就會被橘色的框圈起來，並且右邊的會立即顯示出該圖標的介紹來。

這裏我是自己寫的代碼。

<div id="finance_links">

        

<div class="finance_line">

<a id="finance_link_id_0" href="#" class="finance_link">2+N貸款</a>

      <a id="finance_link_id_1" href="#" class="finance_link">大聯保體</a>

      <a id="finance_link_id_2" href="#" class="finance_link">大聯航</a>

      <a id="finance_link_id_3" href="#" class="finance_link">金卡易貸通</a>

<div class="clear"></div></div>

<div class="finance_line">

<a id="finance_link_id_4" href="#" class="finance_link">金土地</a>

      <a id="finance_link_id_5" href="#" class="finance_link">開發易貸通</a>

      <a id="finance_link_id_6" href="#" class="finance_link">農家樂</a>

      <a id="finance_link_id_7" href="#" class="finance_link">家鄉情</a>

 <div class="clear"></div></div>

 </div>

把css貼出來

#finance_links {

    float: left;

}

#finance_links .finance_link {

    float: left;

}

a.finance_link {

    display: block;

    width: 70px;

    height: 70px;

    text-indent: -1000px;

    border: 3px solid transparent;

    background-repeat: no-repeat;

}

a.finance_link:hover {

    border-color: orange;

}

 

注意border-color: tranparent;這裏的transparent關鍵同時也要給border-width賦上值。接着是這裏最難想的，也就是移到一個圖標上顯示一段字的效果。這裏的html代碼如下，

<div id="finance_intros">
                	<div id="finance_intros_wrap" style="top: -1140px;">
                    					<div id="finance_intro_id_0" class="finance_intro">
						<h3>13</h3>
						<p>1</p>
					</div>
										<div id="finance_intro_id_1" class="finance_intro">
						<h3>312</h3>
						<p>2</p>
					</div>
										<div id="finance_intro_id_2" class="finance_intro">
						<h3>da</h3>
						<p>3</p>
					</div>
。。。。。。。。。。。。。。。。。。。。。。。。

我把css代碼貼一下
#finance_intros {
    position: relative;
    height: 340px;
    float: left;
    overflow: hidden;
    width: 390px;
}

#finance_intros_wrap {
    position: absolute;
}

.finance_intro {
    padding: 20px 10px 20px 50px;
    height: 340px;
    width: 390px;
}

.finance_intro h3 {
    font-size: 18px;
    font-weight: bold;
}

 

 

這裏涉及到一個position:relative的特性，那就是內層的如果有position:absolute的元素就會以最近的position:relative來進行基準定位，然後再用#finance_intros_wrap的top進行不斷地偏移來實現刷屏的效果。把js代碼貼出來，

 

$(function(){
	$(".finance_link").hover(function(){
		var id=parseInt(this.id.split("_")[3]);
		$("#finance_intros_wrap").css("top",-id*$(".finance_intro").get(0).offsetHeight);
		
		return false;
	});
})

 

注意這裏的offsetHeight，這裏的offsetHeight是指height+(padding height)+(border height)。而clientHeight則少了一個border的高度。 這裏的意思就是用鼠標移到一個圖標上的時候獲取其id，再偏移#finance_intros_wrap的top來顯示相應的內容。
f]-->