html文字由下往上滚动

Posted 2023-05-02

参考技术A <div id="demo" style="height:50px;overflow:hidden;">
        <div id="indemo" style="height:200%;">
            <div id="demo1">
                第一行字<br />
                第二行字
            </div>
            <div id="demo2"></div>
        </div>
       </div>
</body>
<script type="text/javascript">
speed = 100;        //数字越大滚得越慢
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerhtml = tab1.innerHTML;
tab.scrollTop = tab1.offsetHeight;
function Marquee()
    if (tab.scrollTop >= tab1.offsetHeight) 
        tab.scrollTop-=tab2.offsetHeight;
    else
        tab.scrollTop+=1;
    

var MyMar=setInterval(Marquee,speed);
</script>

弹窗至下往上弹出

$(document).ready(function() {

  //进入页面后有3秒间隔才弹出弹窗，
    setTimeout(function(){
        $("#c_swt").slideDown(1000);
    },3000);

//点击关闭的动画效果，是自上而下淡出的
    $(".close1").on("click",function(){
            $("#c_swt").stop().animate({top:"100%"},1000,function(){
                $("#add_wx").hide();
                $("#liudian").show();
                setTimeout(function(){
                    $("#c_swt").animate({top:"0"},1000);
                },5000);  //关闭了再次弹出
            });
        });

}）；

光是这一段代码是没法实现至下而上的效果。需要在"#c_swt"盒子定位，position：fixed;bottom:0;或是position:absolute;bottom:0;