jquery实现对联广告的方法

接下来我将详细讲解“jquery实现对联广告的方法”的完整攻略。

标题

攻略一：利用jQuery插件实现对联广告

jQuery拥有丰富的插件库，利用插件实现对联广告是一种较为简单和可靠的方案。以下是实现对联广告的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery 对联广告</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <style>
      .ad-wrap {
        position: fixed;
        top: 50%;
      }

      .ad-left {
        left: 0;
        transform: translateY(-50%);
      }

      .ad-right {
        right: 0;
        transform: translateY(-50%);
      }

      .ad-close {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="ad-wrap ad-left">
      <a href="#"><img src="left-ad.jpg"></a>
      <span class="ad-close">×</span>
    </div>

    <div class="ad-wrap ad-right">
      <a href="#"><img src="right-ad.jpg"></a>
      <span class="ad-close">×</span>
    </div>

    <script>
      $(document).ready(function() {
        var delayTime = parseInt($.cookie('delay-time')) || 0;
        var adWidth = $('.ad-wrap').width();
        var windowWidth = $(window).width();
        var leftPos = 0 - adWidth;
        var rightPos = windowWidth;

        $('.ad-left').animate({
          left: leftPos
        }, delayTime);

        $('.ad-right').animate({
          right: rightPos
        }, delayTime);

        $('.ad-close').click(function() {
          $(this).parent().remove();
        });

        $(window).scroll(function() {
          var scrollTop = $(window).scrollTop();
          var leftNewPos = scrollTop + ((windowHeight - $('.ad-wrap').height()) / 2);
          var rightNewPos = windowWidth - adWidth;

          $('.ad-left').stop().animate({
            top: leftNewPos
          }, 1000);

          $('.ad-right').stop().animate({
            top: rightNewPos
          }, 1000);
        });
      });

      $(window).on('beforeunload', function() {
        $.cookie('delay-time', 5000);
      });
    </script>
  </body>
</html>

实现过程：

先导入jQuery库和jquery-cookie插件库；
设置对联广告元素的样式，包括位置和关闭按钮等；
在$(document).ready()函数中实现对联广告的出现和消失，通过$.cookie实现页面离开后再次进入时对联广告的延迟出现；
在$(window).scroll()函数中实现对联广告的滚动效果。

攻略二：利用jQuery自定义动画实现对联广告

jQuery提供了自定义动画的方法，可以更加灵活地实现对联广告。以下是实现对联广告的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery 对联广告</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      .ad-wrap {
        position: fixed;
        top: 50%;
      }

      .ad-left {
        left: 0;
        transform: translateY(-50%);
      }

      .ad-right {
        right: 0;
        transform: translateY(-50%);
      }

      .ad-close {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="ad-wrap ad-left">
      <a href="#"><img src="left-ad.jpg"></a>
      <span class="ad-close">×</span>
    </div>

    <div class="ad-wrap ad-right">
      <a href="#"><img src="right-ad.jpg"></a>
      <span class="ad-close">×</span>
    </div>

    <script>
      $(document).ready(function() {
        var windowHeight = $(window).height();
        var delayTime = 5000;
        var adWidth = $('.ad-wrap').width();
        var windowWidth = $(window).width();
        var leftNewPos = 0 - adWidth;
        var rightNewPos = windowWidth;

        $('.ad-left').css('top', windowHeight / 2);
        $('.ad-right').css('top', windowHeight / 2);

        $('.ad-left').animate({
          left: leftNewPos
        }, delayTime, function() {
          $(this).animate({
            top: windowHeight / 2
          }, 1000);
        });

        $('.ad-right').animate({
          right: rightNewPos
        }, delayTime, function() {
          $(this).animate({
            top: windowHeight / 2
          }, 1000);
        });

        $('.ad-close').click(function() {
          $(this).parent().remove();
        });
      });
    </script>
  </body>
</html>

实现过程：

设置对联广告元素的样式，包括位置和关闭按钮等；
在$(document).ready()函数中实现对联广告的出现和消失，通过自定义动画实现对联广告的滚动效果，设置停顿时间，添加回调函数实现完成滚动后对联广告停留的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现对联广告的方法 - Python技术站

jquery实现对联广告的方法

标题

攻略一：利用jQuery插件实现对联广告

攻略二：利用jQuery自定义动画实现对联广告

相关文章