jquery或js实现右侧弹出隐藏内容


这样的效果如何实现呢，求高手指点

解决方案 »

  1.   


    <html>
    <head>
    <title>动画效果(弹出框)</title>
    <style>
    div {
    color:red;
    background-color:gray;
    }
    input {
    border:3px solid green;
    padding-top: 3px;
    padding-bottom: 3px;
    cursor: pointer;
    }
    #msg {
    border: 1px solid green;
    width: 200px;
    height: 150px;
    right: 0;
    bottom: -157;
    position: absolute;
    padding-left:5px;
    padding-top:5px;
    overflow: hidden;
    }
    #msg2 {
    border: 1px solid green;
    width: 200px;
    height: 150px;
    left: -207;
    bottom: 0;
    position: absolute;
    padding-left:5px;
    padding-top:5px;
    overflow: hidden;
    }
    #msg3 {
    border: 1px solid green;
    width: 200px;
    height: 150px;
    left: 0;
    top: -157;
    position: absolute;
    padding-left:5px;
    padding-top:5px;
    overflow: hidden;
    }
    #msg4 {
    border: 1px solid green;
    width: 200px;
    height: 150px;
    right: -207;
    top: 0;
    position: absolute;
    padding-left:5px;
    padding-top:5px;
    overflow: hidden;
    }
    </style>
    </head>
    <body style="width: 100%;overflow: hidden;">
    <script type="text/javascript" src="/jquery/js/jquery/jquery-1.2.6.pack.js"></script>
    <div id="msg">
        <input type=button value="关闭" onclick="closemsg();">
        <input type=checkbox>下次不在提示
    </div>
    <div id="msg2">
        <input type=button value="关闭" onclick="closemsg2();">
        <input type=checkbox>下次不在提示
    </div>
    <div id="msg3">
        <input type=button value="关闭" onclick="closemsg3();">
        <input type=checkbox>下次不在提示
    </div>
    <div id="msg4">
        <input type=button value="关闭" onclick="closemsg4();">
        <input type=checkbox>下次不在提示
    </div>
    <script>


    var vv = setInterval("show()",5000);

    function show(){
    if($("#msg").css("bottom") == "0px"){
    $('#msg').animate({bottom: "-157px"}, 1000);
    }else{
    $("#msg").animate({bottom: "0px"}, 1000);
    }
    }

    function closemsg(){
    clearInterval(vv);
    if($("#msg input:checked").size() == 0){
    vv = setInterval("show()",3000);
    }
    $('#msg').animate({bottom: "-207px"}, 1000);
    }

    var vv2 = setInterval("show2()",5000);

    function show2(){
    if($("#msg2").css("left") == "0px"){
    $('#msg2').animate({left: "-207px"}, 1000);
    }else{
    $("#msg2").animate({left: "0px"}, 1000);
    }
    }

    function closemsg2(){
    clearInterval(vv2);
    if($("#msg2 input:checked").size() == 0){
    vv2 = setInterval("show2()",3000);
    }
    $('#msg2').animate({left: "-207px"}, 1000);
    }

    var vv3 = setInterval("show3()",5000);

    function show3(){
    if($("#msg3").css("top") == "0px"){
    $('#msg3').animate({top: "-157px"}, 1000);
    }else{
    $("#msg3").animate({top: "0px"}, 1000);
    }
    }

    function closemsg3(){
    clearInterval(vv3);
    if($("#msg3 input:checked").size() == 0){
    vv3 = setInterval("show3()",3000);
    }
    $('#msg3').animate({top: "-157px"}, 1000);
    }

    var vv4 = setInterval("show4()",5000);

    function show4(){
    if($("#msg4").css("right") == "0px"){
    $('#msg4').animate({right: "-207px"}, 1000);
    }else{
    $("#msg4").animate({right: "0px"}, 1000);
    }
    }

    function closemsg4(){
    clearInterval(vv4);
    if($("#msg4 input:checked").size() == 0){
    vv4 = setInterval("show4()",3000);
    }
    $('#msg4').animate({right: "-207px"}, 1000);
    }
    </script>
    </body>
    </html>把jquery加上运行一下吧楼主也许你会感兴趣的噢