<!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>
扒了别人的一个底部弹出隐藏的广告, 乱七八糟的代码太多了, 并且与自己的css代码都冲突, 无奈试着写了下, 感觉还挺简单