首页 > 代码库 > 用jQuery实现的一种网页内容呈现方式

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

2024-07-07 19:15:48   221人阅读

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

 


联系
我们