jQueryを使用してページ上にタイミングを合わせてポップアップ広告を表示する機能を実装します。

jQuery は多くの機能を実現できます。この記事では主にページ上のポップアップ広告の効果を実現するための jQuery の使用法を紹介します。お困りの皆様の参考になれば幸いです。

1. JQuery の効果

2. ステップ分析:

ステップ 1: jQuery 関連ファイルを導入する

ステップ 2: ページ読み込み関数を作成する

ステップ 3: ページ読み込み関数で、表示する要素を取得する広告画像。

ステップ4: スケジュール動作を設定する(広告画像を表示する関数)

ステップ5: 広告画像を表示する関数で、jQueryメソッドを使用して広告画像を表示する(show())

ステップ6: スケジュールをクリア広告画像を表示する操作

ステップ7: スケジュールされた動作を設定する(広告画像を非表示にする機能)

ステップ8: 広告画像を非表示にする機能で、jQueryメソッドを使用して広告画像を非表示にする(hide())

ステップ9 : 非表示の広告画像のスケジュールされた操作をクリアします

<script></script>
    <script>
      $(function(){
        //1.书写显示广告图片的定时操作
        time=setInterval("showAd()",3000);
      });
      //2.书写显示图片的函数
      function showAd(){
        //3.获取广告图片，并让其显示
        //$("#img_2").show(1000);
        $("#img_2").slideDown(3000);  //滑入
        //4.清除显示图片的定时操作
        clearInterval(time);
        //5.设置隐藏图片的定时操作
        time=setInterval("hiddenAd()",3000);
      }
      function hiddenAd(){
        //6.获取广告图片让其隐藏
        //$("#img_2").hide();
        $("#img_2").slideUp(3000);  //滑出
        //7.清除隐藏图片的定时操作
        clearInterval(time);
      }    
    </script>

3. 最終実装コード:

nbsp;html>

  
    <meta>
    <title>首页</title>
    <style>
      #father{
        border: 0px solid black;
        width: 1300px;
        height: 1600px;
        margin: auto;
      }
      #logo{
        border: 0px solid black;
        width: 1300px;
        height: 50px;
      }
      .top{
        border: 0px solid blue;
        width: 431px;
        height: 50px;
        float: left;
      }
      #top{
        padding-top: 12px;
        height: 38px;
      }
      #menu{
        border: 0px solid red;
        width:1300px;
        height: 50px;
        background: black;
        margin-bottom: 10px;
      }
      ul li{
        display: inline;
        color: white;
      }
      #product{
        border: 0px solid goldenrod;
        width: 1300px;
        height: 550px;
      }
      #product_top{
        border: 0px solid blue;
        width: 100%;
        height: 43px;
        padding-top: 5px;
      }
      #product_bottom{
        border: 0px solid green;
        width: 100%;
        height: 498px;
      }
      #product_bottom_left{
        border: 0px solid red;
        width: 200px;
        height: 498px;
        float: left;
      }
      #product_bottom_right{
        border: 0px solid saddlebrown;
        width: 1094px;
        height: 498px;
        float: left;
      }
      #big{
        border: 0px solid hotpink;
        width: 545px;
        height: 247px;
        float: left;
      }
      .small{
        border: 0px solid blue;
        width: 180px;
        height: 247px;
        float: left;
        /*让里面的内容居中*/
        text-align: center;
      }
      #bottom{
        text-align: center;
      }
      /*去掉超链接的下划线*/
      a{
        text-decoration: none;
      }
    </style>
    <script></script>
    <script>
      $(function(){
        //1.书写显示广告图片的定时操作
        time=setInterval("showAd()",3000);
      });
      //2.书写显示图片的函数
      function showAd(){
        //3.获取广告图片，并让其显示
        //$("#img_2").show(1000);
        $("#img_2").slideDown(3000);  //滑动
        //4.清除显示图片的定时操作
        clearInterval(time);
        //5.设置隐藏图片的定时操作
        time=setInterval("hiddenAd()",3000);
      }
      function hiddenAd(){
        //6.获取广告图片让其隐藏
        //$("#img_2").hide();
        $("#img_2").slideUp(3000);
        //7.清除隐藏图片的定时操作
        clearInterval(time);
      }    
    </script>
  
  
    <p>
      <!--定时弹出广告图片位置-->
      <img  src="/static/imghwm/default1.png" data-src="../img/pic.jpg" class="lazy" alt="jQueryを使用してページ上にタイミングを合わせてポップアップ広告を表示する機能を実装します。" >
      <!--1.logo部分-->
      </p><p>
        </p><p>
          <img  src="/static/imghwm/default1.png" data-src="../img/logo2.png" class="lazy" alt="jQueryを使用してページ上にタイミングを合わせてポップアップ広告を表示する機能を実装します。" >
        </p>
        <p>
          <img  src="/static/imghwm/default1.png" data-src="../img/header.png" class="lazy" alt="jQueryを使用してページ上にタイミングを合わせてポップアップ広告を表示する機能を実装します。" >
        </p>
        <p>
          <a>登录</a>
          <a>注册</a>
          <a>购物车</a>
        </p>
      
      <!--2.导航栏部分-->  
      <p>
        </p>

          
• 首页
               
• 手机数码
               
• 家用电器
               
• 鞋靴箱包
             

                      

               

             

        

          最新商品                       

        

          

                       

          

            

                           

            

                             

榨汁机

              

599

                         

                             

电视机

              

1599

                         

                             

锅

              

399

                         

                             

面包机

              

799

                         

                             

咖啡机

              

899

                         

                             

洗衣机

              

999

                         

                             

扫地机器人

              

1599

                         

                             

微波炉

              

1099

                         

                             

压力锅

              

799

                                                     

               

             

               

             

          关于我们           联系我们           招贤纳士           法律声明           友情链接           支付方式           配送方式           服务声明           广告声明           

            Copyright © 2005-2016 hh商城 版权所有            

              

関連推奨事項:

CSS3 でホームページの壁面広告効果を実現する方法

淘宝網の商品広告を実装する方法JavaScript エフェクト例の詳しい説明

JS Webページの横スクロール広告効果

以上がjQueryを使用してページ上にタイミングを合わせてポップアップ広告を表示する機能を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。