jQuery 滑出层

kaobian

浏览: 211682 次
性别:
来自: 哈尔滨

最近访客更多访客>>

smh0310

tom2139779

smiles_man

lucifer_xtt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

CSS 脚本 jQuery 特效

<html>

<head>
<STYLE>
body {
background-color: #EEEEEE;
margin: 0px;
text-align: center;
}
#wrap {
width: 736px;
background-color: #FFFFFF;
overflow: hidden;
margin: 12px;
padding: 12px;
}
#topcontainer {
height: 80px;
width: 732px;
background-color: #99FF66;
border: 1px solid #79F200;
}
#topwrap {
width: 100%;
}
input {
background-color: #99FF66;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #79F200;
border-right-color: #79F200;
border-bottom-color: #79F200;
border-left-color: #79F200;
line-height: 28px;
background-position: center;
height: 30px;
}
</STYLE>
<title>jQuery-滑出层</title>
//读者自己加入jquery的类库
<script language="javascript" src="jquery-1.3.1.js"></script>

<script language="javascript">
    //0：div关闭，1：div展开
    var divStatus = 0;
//弹出div 的高度
    var divHeight = 200;
//循环脚本计数器
    var i =0;
//setIntervaleId2011-3-30
    var change ;
    function showDiv(){
        if(divStatus == 0){
            jQuery("#hidetop").css({display:''});
            jQuery("#showtop").css("display","none");
            jQuery("#topcontainer").css("height",divHeight);
            jQuery("#topcontainer").css("display","");
            jQuery("#topwrap").css("overflow","hidden");
            change = window.setInterval("cycle()",100);
        }
    }
    function closeDiv(){
        if(divStatus == 1){
            divStatus = 0;
            jQuery("#showtop").css({display:''});
            jQuery("#hidetop").css("display","none");

            jQuery("#topcontainer").css("height",divHeight);

            jQuery("#topwrap").css("overflow","hidden");
            change = window.setInterval("decycle()",100);
        }
    }

    function decycle(){
            var opx = document.getElementById("topcontainer").style.marginTop.split("px")[0];

var pxstep = Math.round((divHeight / Math.round(20*0.5))+0.5);
var npx = Number(opx) - Number(pxstep);
if (Math.abs(npx)>divHeight+2){
                jQuery("#topcontainer").css('marginTop','-' + divHeight + 'px');
            }else{
                jQuery("#topcontainer").css('marginTop',String(npx) + 'px');
            }
            i++ ; //计数器+1
             if (i>(Math.round(20*0.5)-1)){
             window.clearInterval(change);
             i=0;
             divStatus=0;
             jQuery("#topcontainer").css('display','none');
             }

    }

    function cycle(){
        var opx = document.getElementById("topcontainer").style.marginTop.split("px")[0];
var pxstep = Math.round((divHeight / 20)+0.5);
var npx =     Number(opx) +Number(pxstep);

if (npx>0){
            jQuery("#topcontainer").css("marginTop","0px");
        }else{
            jQuery("#topcontainer").css("marginTop",String(npx)+"px");
        }
    i++ ;//计数器+1
        if (i > 20){
            window.clearInterval(change);
            i=0;
            divStatus=1;
        }
    }

</script>
</head>

<body>

<div id="wrap">
<div align="left" style="margin-bottom:3px">
      <input type="button" id="showtop" onclick="showDiv()" value="展开顶部"/>
<input type="button" id="hidetop" style="display:none" onclick="closeDiv();" value="关闭顶部" />
</div>

<div id="topwrap">
<div id="topcontainer" style="display:none;margin-top:-200px;">xxx</div>
</div>

</div>

</div>
</body>

</html>

1
顶

0
踩

分享到：

jQuery autocomplete 处理json 返回值形式 ... | iBatis resultClass 的缓存问题

2011-03-30 11:16
浏览 2776
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论