用jQuery实现广告的定时弹窗

104 阅读 0 评论 69 点赞

我是靠谱客的博主炙热服饰，这篇文章主要介绍用jQuery实现广告的定时弹窗，现在分享给大家，希望可以做个参考。

广告样式

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	<script src="js/jquery-3.4.0.js"></script>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: burlywood;
            display: none;  //页面默认不显示
            position: fixed;
            right: 10px;
            bottom: 10px;
        }
	</style>
    <body>
    <div></div>    //就一块简单的div
    </body>

jQuery代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
    $(function () {  
    //页面加载完成后4秒弹出，2秒显示时间，从第二次开始隔2秒弹出，仍然2秒显示
        setInterval(s, 4000);
       function s() {
           $("div").fadeIn();//淡入
           //$("div").slideDown();//滑入
           //$("div").show();//显示
           //$("div").css("display","block");
           //$("div")[0].style.display="block";
           setTimeout(nos, 2000);
       }
       function nos() {
           $("div").fadeOut();//淡出
           //$("div").slideUp();//滑出
           //$("div").hide();//隐藏
           //$("div")[0].style.display="none";
       }
    });
</script>