用jQuery实现的一种网页内容呈现方式

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>一种网页内容呈现方式</title>
<style>
.box-now{cursor:pointer;background-color:#eee;}
.qfbd{width:400px;height:auto;border:1px solid #333;}
.box{height:34px;overflow:hidden;clear:both;border:1px solid #999;}
.box .tit{height: 33px;line-height: 33px;text-align: left;border:1px solid #ccc;}
.box .pt{}
.box .pt:after{content:".";display:block;visibility:hidden;height:0px;clear:both;}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
jQuery(function(jq){
    var cls = "box-now";
    var rd = jq(#sdyd-frag);
    var divs = rd.find(.box);
    var dur = 600,
    h = {min:34, max:193};
    
    divs.mouseover(function(el){
        el = jq(this);
        divs.not(el).removeClass(cls).stop().animate({height:h.min},dur,linear);
        
        el.stop().animate({height:h.max},dur,linear);
        el.addClass(cls);
    });

    divs.css({height:h.min}).eq(0).css({height:h.max});
    divs.eq(0).addClass(cls);
});
</script>
</head>
<body>
<div id="sdyd-frag" class="qfbd">

    <div class="box">
        <div class="tit">标题一</div>
        <div class="pt">内容一</div>
    </div>
    <div class="box">
        <div class="tit">标题二</div>
        <div class="pt">内容二</div>
    </div>
    <div class="box">
        <div class="tit">标题三</div>
        <div class="pt">内容三</div>
    </div>
    <div class="box">
        <div class="tit">标题四</div>
        <div class="pt">内容四</div>
    </div>
    <div class="box">
        <div class="tit">标题五</div>
        <div class="pt">内容五</div>
    </div>
    <div class="box">
        <div class="tit">标题六</div>
        <div class="pt">内容六</div>
    </div>
</div>
</body>
</html>

 

用jQuery实现的一种网页内容呈现方式,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。