用jQuery实现广告的定时弹窗

68 阅读 0 评论 45 点赞

我是靠谱客的博主炙热服饰，最近开发中收集的这篇文章主要介绍用jQuery实现广告的定时弹窗，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

广告样式

	<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代码

<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>