QQ弹窗功能中遇到的问题及如何实现

最新推荐文章于 2023-03-28 22:35:43 发布

走到天涯海角

最新推荐文章于 2023-03-28 22:35:43 发布

阅读量337

点赞数 1

文章标签： QQ弹窗模拟 JS

@曾超缘的博客

本文链接：https://blog.csdn.net/weixin_42995083/article/details/85755133

版权

遇到的问题一：窗口一直抖动

  overflow-y: scroll;//让滚动条始终存在

遇到的问题二：出现底部滚动条

  overflow-x:hidden;//让底部滚动条隐藏

遇到的问题三：忘记修改值

         .ad{
            position: fixed;
            right: 0;
            bottom: 0;
            width: 576px;
            /*高度一开始设为324px好调位置，最后要设为0*/
            height:0;
            border: 1px solid black;
            }

遇到的问题四：把关闭id要执行的操作放外面

var allHeiht=324;
//关闭 是让这个Clss效果隐藏掉
var Close=setInterval(CloseFunc,1);//导致功能没走
myClose.onclick=function () {
    function CloseFunc() {
        if(allHeiht<=324){
            allHeiht-=1;
            myAD.style.height=allHeiht+"px";//字符串
        }else if(allHeiht==0){
            myAD.style.display="none";
            clearInterval(Close);
        }
    }
}

遇到的问题五：加载完就显示出弹窗，延迟没有设置成功，两个功能没有区分清楚，不会用

//一般情况下setTimeout用于延迟执行某方法或功能，
//setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步
var show=setTimeout(adShowFunc,3000);
function adShowFunc() {
        if(adHeight<324){
            adHeight+=2;
            myAD.style.height=adHeight+"px";//字符串
        }else{
            myAD.style.height="324px";
            clearInterval(show);
        }
}
setTimeout(adShowFunc,1000);
window.onload=function () {
    show=setInterval(adShowFunc,5);
    }

获得老师的帮助：函数外设置延迟时间3秒执行，函数内实时刷新

//一般情况下setTimeout用于延迟执行某方法或功能，
//setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步
var timer=setTimeout(adShowFunc,3000);
function adShowFunc() {
    var show = setInterval(function() {
        if(adHeight<324){
            adHeight+=2;
            myAD.style.height=adHeight+"px";//字符串
        }else{
            myAD.style.height="324px";
            clearInterval(show);
        }
    }, 2);
}

最终实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹窗功能学习</title>
    <style type="text/css">
        body{
            width: 100%;
            height:1000px;
            overflow-y: scroll;
            overflow-x:hidden;
            background-color: #1abc9c;
        }

        .ad{
            position: fixed;
            right: 0;
            bottom: 0;
            width: 576px;
            /*高度一开始设为324px好调位置，最后要设为0*/
            height:0;
            border: 1px solid black;

        }
        .btn{
            position: absolute;
            top:0;
            right:0;
            cursor: pointer;
        }
        .bg{

            width: 576px;

        }
    </style>
</head>
<body>


<div id="myAD" class="ad">
    <img id="myClose" class="btn" src="images/jiahao.png" alt="">
    <a href="#"><img class="bg" src="images/bg2.png" alt=""></a>
</div>
<script type="text/javascript">

    var myAD=document.getElementById("myAD");
    var myClose=document.getElementById("myClose");
    var adHeight=0;
    var allHeiht=324;
    var timer=setTimeout(adShowFunc,10000);


    //关闭 是让这个Clss效果隐藏掉
    myClose.onclick=function () {
        var Close=setInterval(CloseFunc,1);
        function CloseFunc() {
            if(allHeiht<=324){
                allHeiht-=1;
                myAD.style.height=allHeiht+"px";//字符串
            }else if(allHeiht==0){
                myAD.style.display="none";
                clearInterval(Close);
            }
        }
    }

    function adShowFunc() {
        var show = setInterval(function() {
            if(adHeight<324){
                adHeight+=2;
                myAD.style.height=adHeight+"px";//字符串
            }else{
                myAD.style.height="324px";
                clearInterval(show);
            }
        }, 2);
        


    }
    // setTimeout(adShowFunc,5000);
    // window.οnlοad=function () {
    //     show=setInterval(adShowFunc,5);
    // }

</script>
</body>
</html>