分别使用JQ和JS实现定时弹窗

最新推荐文章于 2023-03-21 01:39:12 发布

挨-踢菜菜

最新推荐文章于 2023-03-21 01:39:12 发布

阅读量1.2k

点赞数

分类专栏：学习笔记文章标签： jquery 函数广告 javascript

本文链接：https://blog.csdn.net/wohuizuimei/article/details/78325654

版权

学习笔记专栏收录该内容

9 篇文章 1 订阅

订阅专栏

使用JQ实现定时弹窗：
1、书写步骤：

第一步：引入jQuery相关的文件

第二步：书写页面加载函数

第三步：在页面加载函数中，获取显示广告图片的元素。

第四步：设置定时操作(显示广告图片的函数)

第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())

第六步：清除显示广告图片的定时操作

第七步：设置定时操作(隐藏广告图片的函数)

第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())

第九步：清除隐藏广告图片的定时操作

2、代码实现

<script type="text/javascript">
    $(function(){
        time = setInterval("showAd()" , 3000);
    })
    function showAd(){
        $("#img1").fadeIn(3000);
        //fadeIn是图片出现的效果 fadeIn为淡入淡出效果
        clearInterval(time);
        time = setInterval("showhideAd()",3000);
    }
    function showhideAd() {

        $("#img1").slideUp(3000);
        clearInterval(time);

    }
</script>

使用JS实现弹窗效果

1.实现步骤

第一步：在页面的指定位置，隐藏一个广告图片（使用display的none的属性）

第二步：确定事件（onload）并为其绑定一个函数

第三步：书写这个函数让其显示的定时操作

第四步：书写定时器中的函数（获取广告图片的位置并设置属性style的display值block）

第五步：清除显示图片的定时操作

第六步：书写隐藏图片的定时操作

第七步：书写定时器中的函数（获取广告图片的位置并设置属性style的display值none）

第八步：清除隐藏图片的定时操作

2.代码实现

//页面的指定位置，隐藏一个图片
<body onload="init()">
    <img src="#图片位置" width="100%" style="display: none" id="img2">
</body>
<script type="text/javascript">
    function init(){
        time = setInterval("showAd()",3000);
    }
    function showAd() {
        var adEle = document.getElementById("#img2");
        adEle.style.display:"block";
        clearInterval(time);
        time = setInterval("hidden()",3000);
    }
    function hidden() {
        var adEle = document.getElementById("#img2");
        adEle.style.display:"none";
        clearInterval(time);
    }

不管是JS还是JQ实现弹窗广告，实现的步骤都差不多。JS是使用引入的方法进行弹窗的实现，而JQ是事先把图片隐藏在所要显示的位置上，通过改变display的属性，来实现弹窗。

挨-踢菜菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分别使用JQ和JS实现定时弹窗

使用JQ实现定时弹窗： 1、书写步骤：第一步：引入jQuery相关的文件第二步：书写页面加载函数第三步：在页面加载函数中，获取显示广告图片的元素。第四步：设置定时操作(显示广告图片的函数)第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())第六步：清除显示广告图片的定时操作第七步：设置定时操作(隐藏广告图片的函数)第八步：在隐藏广告图片的函数中，使用jQuery的方
复制链接

扫一扫

专栏目录