前端javascript QQ右下角弹窗

最新推荐文章于 2022-03-23 16:01:50 发布

木目目

最新推荐文章于 2022-03-23 16:01:50 发布

阅读量167

点赞数

分类专栏： js 文章标签： javascript html css html5

本文链接：https://blog.csdn.net/xsyxsyxsyy/article/details/111354939

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯首页弹窗</title>
    <style>
        body{
            height: 970px;
            margin: 0;
            padding: 0;
        }
        .ad{
            /* display:block; */
            position: fixed;
            bottom: 0;
            right: 0;
            width: 400px;
            height: 0px;
            /* border: 2px solid black; */
        }
        .btn{
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
        }
        .bg{
            width: 400px;
        }
    </style>
</head>
<body>
    <iframe src="http://www.qq.com" width="100%" height="100%" frameborder="0"></iframe>
    <div id="myAD" class="ad">
        <img id="myClose" class="btn" src="img/close.jpg" alt="">
        <a href="#"><img class="bg" src="img/0.jpg" alt=""></a>
    </div>
</body>
<script>
    var myAD = document.getElementById("myAD");
    var myClose = document.getElementById("myClose");
    var adHeight = 0;
     myClose.onclick = function(){
        myAD.style.display = "none";
    }
    var show = setInterval(adShowFunc,20);
    function adShowFunc(){
        if(adHeight<225){
            adHeight +=2;
            myAD.style.height = adHeight + "px";//字符串
        } else{
            myAD.style.height = "225px";
            adHeight = 225;
            clearInterval(show);
        }
    }
    window.onload = function(){
        show = setInterval(adShowFunc,5);
    }

木目目

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端javascript QQ右下角弹窗

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>腾讯首页弹窗</title> <style> body{
复制链接

扫一扫