打开网页右下角广告栏慢慢出现，点击慢慢消失

最新推荐文章于 2021-05-30 21:43:15 发布

yaxi_yaxi_yaxi

最新推荐文章于 2021-05-30 21:43:15 发布

阅读量621

点赞数

分类专栏： js小功能文章标签： js js小功能广告显示隐藏

本文链接：https://blog.csdn.net/qq_35176916/article/details/86091112

版权

js小功能专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上半年会坚持每周写几个用纯js实现的功能。

篇一：

功能：打开网页div慢慢从右下角出现，点x慢慢消失。

效果图：

js代码：

window.onload=function(){
    var tardiv = getElement('.content');
    var addHeight=1; //每次循环增加的高度
    tardiv.style.bottom='-200px';
    var timer=setInterval(function(){
        //console.log(tardiv.style.bottom) //  string类型   20px;
         var bottoms = parseInt(tardiv.style.bottom);
        tardiv.style.bottom=bottoms+addHeight+'px';
        if(parseInt(tardiv.style.bottom)===0){
            clearInterval(timer);
        }
    },10)
    var x = getElement('.x');
    var self=this;
    x.addEventListener('click',function(){
        if(self.timer){
            clearInterval(self.timer);
        }
        var timers = setInterval(function(){
        var bottomss = parseInt(tardiv.style.bottom);
        tardiv.style.bottom=bottomss-addHeight+'px'; 
        if(parseInt(tardiv.style.bottom)===-200){
            clearInterval(timers);
        } 
        },10)
    })
    //获取元素方法
    function getElement(el) {
        var els = el.substr(1);
       return el.substr(0,1) ==='#' ? document.getElementById(els): document.getElementsByClassName(els)[0];
    }
}

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>右下角广告栏打开网页慢慢出现，点击慢慢消失</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="content">
       <span class="x">x</span>
    </div>
    <script src="js/one.js"></script>
</body>
</html>

css

div {
    width: 200px; height: 200px; background: red;
    position: fixed; right: 0;
}
span {
    position: absolute; display: inline-block;
    width: 20px; height: 20px; background: black; 
    right: 0; color: white; text-align: center;
    line-height: 20px; cursor: pointer;
}

注意点：

1：js获取样式的方法 el.style.bottom 得到的是string类型，

2:显示隐藏的div 需要设置样式 position：fixed

yaxi_yaxi_yaxi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
打开网页右下角广告栏慢慢出现，点击慢慢消失

上半年会坚持每周写几个用纯js实现的功能。篇一：功能：打开网页div慢慢从右下角出现，点x慢慢消失。效果图：js代码：window.onload=function(){ var tardiv = getElement('.content'); var addHeight=1; //每次循环增加的高度 tardiv.style.bottom='-20...
复制链接

扫一扫

专栏目录