`
kaobian
  • 浏览: 208753 次
  • 性别: Icon_minigender_1
  • 来自: 哈尔滨
社区版块
存档分类
最新评论

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
踩
分享到：
| iBatis resultClass 的缓存问题
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics