JQuery实现广告放映_jquery 实现投放时段-CSDN博客

本文链接：https://blog.csdn.net/wq2323/article/details/105965565

序言

在生活中，我们可以在各式各样的网站中看到广告，有的是自动弹窗、有的是固定在一个div当中，还有的是能够定时产生定时关闭，今天，我们将有JQuery的高级动画效果以及定时器来实现广告的投放。

相关知识

JQuery的动画效果

1.通用默认效果
	播放效果 show(speed,easing,fn)
	关闭效果 hide（speed,easing,fn）
	切换效果 Toggle(speed,easing,fn)
	**speed指的是播放和关闭相关动画的速度，分别为fact、normal、solw
	**easing指的是播放效果，分别有swing、linear，如不填写则默认为swing
	**fn：在动画完成时执行的函数，每个元素执行一次。

2. 滑动显示和隐藏方式
	1. slideDown([speed],[easing],[fn])
	2. slideUp([speed,[easing],[fn]])
	3. slideToggle([speed],[easing],[fn])

3. 淡入淡出显示和隐藏方式
	1. fadeIn([speed],[easing],[fn])
	2. fadeOut([speed],[easing],[fn])
	3. fadeToggle([speed,[easing],[fn]])

好了，故此相关JQuery的相关高级动画效果已经了解完毕，我们现在来实现广告投放功能，步骤如下：

1.在HTML页面中定义一个id为dd的div块专门来展示相关广告，展示位置可自行优化
2.在script中定义两个方法取名为ddShow()、ddHide()分别实现广告投放和关闭功能
3.定义一个入口函数，借助定时器来定时开启和关闭广告

具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            setTimeout(ddShow,2000);
            setTimeout(ddHide,5000);
        })


        function ddShow(){
            $("#ad").show("slow");
            //显示广告

        }
        function ddHide(){
            $("#ad").hide("slow");
            //隐藏广告

        }
    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="../img/1.jpg" />
    </div>

</div>
</body>
</html>