您好,欢迎来到搜123网站分类目录!
当前位置:搜123网站分类目录 » 站长资讯 » 网站运营 » 文章详细 订阅RssFeed

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

来源:互联网 浏览:52次 时间:2019-11-10
使用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的属性,来实现弹窗。

推荐站点

  • 十二星座生肖网十二星座生肖网

    十二星座生肖网,提供星座、生肖、个性、开运方法、运势、配对、解梦以及命理分析、血型、算命、风水等星相生肖命理信息。

    www.12xzsx.com
  • 汇吃的汇吃的

    汇吃的是一个美食分享平台,是一个分享美食制作方法的地方,也有美食故事的分享,提供图文菜谱大全,享受美食的乐趣,找美食菜谱,就上汇吃的。

    www.huichide.com
  • 中国天气网中国天气网

    中国天气网官方权威发布天气预报,逐三小时天气预报,提供天气预报查询一周,天气预报15天查询,空气质量,生活指数,旅游出行,交通天气等查询服务

    www.weather.com.cn
  • 520设计网520设计网

    520设计-中国网页平面设计师交流平台,专为酷爱网页设计、界面设计的你而倾力打造。拥有设计视频教程、网页模板、设计素材、CSS3+HTML5、网页平面设计视频教程、设计师网址导航等相关内容,它将成为你设计路上的一位好伙伴!

    www.sj520.cn
  • 天极网天极网

    天极网,全球最大的中文IT门户,专注IT产品采购及应用指南,每天为广大用户提供电脑硬件,软件,数码,商情,手机,笔记本,游戏,互联网,数字家庭,教育,下载等内容,解决网友工作学习中的技术疑难,指导数字科技消费,领引时尚生活潮流.

    www.yesky.com