底部点击隐藏和弹出的效果代码,JS代码库,德仔网

代码语言

代码分类

【JS】底部点击隐藏和弹出的效果

作者:freespider / 发布于2013/12/16/ 306

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

<body>

<div id="btm">For a test!
  <input type="button" id="button" value="测试">
</div>

<div id="btm2">
  <input type="button" id="button2" value="测试">
</div>
<style type="text/css">
  #btm{
    width:200px;
    height:20px;
    background-color:darkred;
    color:yellow;
    position:fixed;
    right:50%;
    bottom:0;
  }
  #btm2{
    width:200px;
    height:20px;
    background-color:green;
    color:yellow;
    position:fixed;
    right:50%;
    bottom:-50px;
  }
</style>

</body>
</html>



<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  BottomUp("#button","#button2","#btm","#btm2","-20px")    
});
   
//底部弹出,隐藏
//btn1,btn2  点击 出现动画
//div1,div2  动画的div
//hgt  动画的幅度
function BottomUp(btn1,btn2,div1,div2,hgt){
  $(btn1).click(function(){
         $(div1).animate({
            bottom: hgt
          },  
          "slow",
          function(){
            $(div2).animate({bottom: '0px'}, "slow");
          }
         
          );
             
     })
     $(btn2).click(function(){         
        $(div2).animate({bottom: hgt}, "slow",
          function(){
            $(div1).animate({bottom: '0px'}, "slow");
          }
        );     
     })
}
</script>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　点击隐藏　

同语言下

可能有用的

freespider贡献的其它代码(22)