?
我想搞一个这样的效果,就是。
用鼠标覆盖某一个图标,该图标就会被橘色的框圈起来,并且右边的会立即显示出该图标的介绍来。
这里我是自己写的代码。
<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]-->