jQuery 滑出层

最新推荐文章于 2021-03-24 09:15:44 发布

--------11111111111-

最新推荐文章于 2021-03-24 09:15:44 发布

阅读量121

点赞数

分类专栏： jQuery 文章标签： CSS 脚本 jQuery 特效 ViewUI

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<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" οnclick="showDiv()" value="展开顶部"/>
<input type="button" id="hidetop" style="display:none" οnclick="closeDiv();" value="关闭顶部" />
</div>

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

</div>

</div>
</body>

</html>

--------11111111111-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 滑出层

body { background-color: #EEEEEE; margin: 0px; text-align: center; } #wrap { width: 736px; background-color: #FFFFFF; overflow: hidden; margin: 12px; padding: 12px; } ...
复制链接

扫一扫

专栏目录