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

使用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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值