实现点图换页的功能

 

我想搞一个这样的效果，就是。

用鼠标覆盖某一个图标，该图标就会被橘色的框圈起来，并且右边的会立即显示出该图标的介绍来。

这里我是自己写的代码。

<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]-->