jquery实现sliding box效果6-peek

jquery实现sliding box效果6-peek - 郭培的日志- 网易博客

2010-01-28 13:32:00 阅读2 评论0 字号：大中小

效果图展示：

html代码：

<div class="boxgrid peek">
 <a href="http://feeds2.feedburner.com/buildinternet" target="_blank">
<img src="images/birss.jpg"/></a>
 <a href="http://www.buildinternet.com" target="_blank"><img class="cover" 
src="images/buildinternet.jpg"/></a>
</div>

css样式：

*{ padding:0px; margin:0px; }
body{ background:#D5DEE7;padding:50px; }
a{ color:#C8DCE5; }
h3{ margin:10px 10px 0 10px; color:#FFF; font:bold 18pt Arial, sans-serif; 
letter-spacing:-1px; }
.boxgrid{ width: 325px; height: 260px; margin:10px; background:#161613; 
border: solid 2px #8399AF;overflow: hidden; position: relative;}
.boxgrid img{position: absolute; top: 0; left: 0; border: 0; }
.boxgrid p{ padding: 0 10px; color:#afafaf; font-weight:bold; 
font:10pt "Lucida Grande", Arial, sans-serif; }

jQuery代码：

<script type="text/javascript" src="images/jquery-1.3.1.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 //Partial Sliding (Only show some of background)
 $('.boxgrid.peek').hover(function(){
 $(".cover", this).stop().animate({top:'90px'},
{queue:false,duration:160});
 }, function() {
 $(".cover", this).stop().animate({top:'0px'},
{queue:false,duration:160});
 });
 })
</script>

<#--{zx1}日志--> <#--推荐日志--> <#--引用记录--> <#--相关日志--> <#--推荐日志--> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构-->

郑重声明：资讯【jquery实现sliding box效果6-peek - 郭培的日志- 网易博客】由发布，版权归原作者及其所在单位，其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实，请读者仅作参考，并请自行核实相关内容。若本文有侵犯到您的版权，请你提供相关证明及申请并与我们联系（qiyeku # qq.com）或【在线投诉】，我们审核后将会尽快处理。

—— 相关资讯 ——