jquery_jquery를 기반으로 Baidu 뉴스 탐색 메뉴 슬라이딩 애니메이션 구현-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jquery_jquery를 기반으로 Baidu 뉴스 탐색 메뉴 슬라이딩 애니메이션 구현

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:10 PM

이 글의 예시는 참고용으로 Baidu 뉴스 탐색 메뉴 슬라이딩 애니메이션을 구현하기 위해 jquery를 공유하는 것입니다.

아이디어와 단계
1. UL을 사용하여 간단한 수평 탐색을 만듭니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>仿百度新闻菜单滑动动画</title>
  <style type="text/css">
    body, div, ul, li, a
    {
      margin: 0px;
      padding: 0px;
      font-size: 20px;
      color: #FFF;
      border: 0;
    }
    .div-nav-container
    {
      margin-top: 50px;
      width: 100%;
      background-color: #01204F;
    }
    .div-nav
    {
      width: 870px;
      margin: 0px auto;
    }
    ul
    {
      list-style: outside none none;
      width: 100%;
      height: 50px;
    }
    ul li
    {
      float: left;
    }
    ul li a
    {
      line-height: 50px;
      display: block;
      padding: 0px 15px;
      text-align: center;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="div-nav-container">
    <div class="div-nav">
      <ul>
        <li><a href="javascript:void(0)">网站首页</a></li>
        <li><a href="javascript:void(0)">热点</a> </li>
        <li><a href="javascript:void(0)">国际新闻</a> </li>
        <li><a href="javascript:void(0)">国内新闻</a> </li>
        <li><a href="javascript:void(0)">国家政策</a> </li>
        <li><a href="javascript:void(0)">体育新闻</a> </li>
        <li><a href="javascript:void(0)">娱乐新闻</a> </li>
        <li><a href="javascript:void(0)">名人</a> </li>
        <li><a href="javascript:void(0)">古迹</a> </li>
      </ul>
    </div>
  </div>
</body>
</html>

로그인 후 복사

2. 메뉴 슬라이딩 애니메이션을 위해 div-hover라는 이름의 div를 추가하고 CSS 스타일을 설정합니다.

<style type="text/css">
  .div-hover
  {
   background-color: Red;height: 50px;
   left: 0px;
   top: 0px;
   width: 0px;
  }
</style>
<div class="div-nav">
   <!--添加滑动背景-->
   <div class="div-hover">
   </div>
   <ul>
     ...
   </ul>
</div>

로그인 후 복사

3. 메뉴 항목의 슬라이딩 이벤트를 추가하고 div-hover의 왼쪽 및 위쪽 여백과 너비를 계산합니다.

<script type="text/javascript">
  var divHoverLeft = 0;
  var aWidth = 0;

  $(document).ready(function () {
    $("a").on({
      'mouseover': function () {
        SetDivHoverWidthAndLeft(this);
        //设置滑动动画
        $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
      }
    });
  });

  function SetDivHoverWidthAndLeft(element) {
    divHoverLeft = GetLeft(element);
    aWidth = GetWidth(element);
  }

  //获得Li宽度
  function GetWidth(ele) {
   return $(ele).parent().width();
  }

  //获得div-hover左边距
  function GetLeft(element) {
   //获得li之前的同级li元素
   var menuList = $(element).parent().prevAll();
   var left = 0;
   //计算背景遮罩左边距
   $.each(menuList, function (index, ele) {
    left += $(ele).width();
   });
   return left;
 }
</script>

로그인 후 복사

효과 미리보기

미리보기 효과에서 알 수 있듯이 div-hover 위치에 문제가 있습니다. div-hover는 상위 요소와 절대 위치해야 하므로 수정된 코드(주석 부분이 수정 지점입니다) 다음과 같습니다:

<style type="text/css">
  .div-nav
  {
    width: 870px;
    margin: 0px auto;
    /*作为div-hover的父元素定位参照*/
    position: relative;
  }
  .div-hover
  {
    background-color: Red;
    height: 50px;
    left: 0px;
    top: 0px;
    width: 0px;
    /*以父元素绝对定位*/
    position: absolute;
  }
</style>

로그인 후 복사

위치 문제가 해결되었음에도 불구하고 배경 이미지는 여전히 텍스트 위에 떠 있으므로 빨간색 div 위에 텍스트가 뜨도록 코드가 조정됩니다.

<style type="text/css">
  ul li
  {
    float: left; 
    /*****Start（作用:导航文字浮于div-hover红色之上）*******/
    position: relative;
    z-index: 4; 
    /*********************End*************************/
  }
</style>

로그인 후 복사

효과 미리보기

4. 로딩 페이지에 메뉴 클릭 및 기본 메뉴 선택 추가

<style type="text/css">
  /**设置菜单激活***/
  .active
  {
    background-color: Red;
  }
</style>
<script type="text/javascript">
  var divHoverLeft = 0;
  var aWidth = 0;

  $(document).ready(function () {
    $("a").on({
      'mouseover': function () {
        SetDivHoverWidthAndLeft(this);
        //设置滑动动画
        $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
      },
      /*添加点击事件*/
      'click': function () {
        SetDivHoverWidthAndLeft(this);
        //清除所有a标签class
        $('a').removeClass();
        //设置当前点击菜单为激活状态
        $(this).addClass('active');
      }
    });
  });
</script>
</head>
<body>
  <div class="div-nav-container">
    <div class="div-nav">
      <!--添加滑动背景-->
      <div class="div-hover">
      </div>
      <ul>
        <--默认菜单激活--> 
        <li><a class="active" href="javascript:void(0)">网站首页</a></li>
        …………
      </ul>
    </div>
  </div>
</body>
</html>

로그인 후 복사

효과 미리보기

5. 마우스를 범위 밖으로 이동하여 현재 활성화된 요소를 자동으로 찾는 기능을 추가합니다.

이 기능을 수행하기 전에 먼저 생각해 보겠습니다. 마우스 아웃 작업의 경우 mouseout 및 mouseleave 이벤트를 생각할 수 있으며 다음과 같은 질문이 있습니다.

①이 조건을 충족하려면 이곳에서 어떤 이벤트를 선택해야 합니까?

②선택한 이벤트는 어떤 요소에 위치하나요?

③마우스를 밖으로 옮긴 후 현재 어떤 요소가 활성화되어 있는지 어떻게 알 수 있나요?

④div-hover의 왼쪽 여백과 너비에 해당하는 값을 어떻게 알 수 있나요?

연습을 통해 진정한 지식을 얻고, 연습해 보세요.

우선 마우스아웃을 예로 들면, 첫 번째 문제는 자연스럽게 해결됩니다.

둘째, 이벤트가 위치한 요소는 무엇입니까? 위의 GIF 다이어그램 분석을 통해 위치 지정이 A 태그 또는 Li 태그에 있는 경우 A 태그 또는 Li 태그 사이를 전환하는 마우스 이동 작업도 활성 요소에 대한 자동 위치 지정을 트리거합니다(자동이라고 가정). 위치 지정이 완료됨) 다음 그림이 표시됩니다.

따라서 A나 Li 태그에 위치할 수 없습니다. 다시 생각해 보면 마우스를 전체 탐색 범위 밖으로 이동해야 합니다. 그러면 어떤 요소를 위치시켜야 하는지 쉽게 알 수 있습니다. UL 또는 UL의 상위 요소의 크기 범위는 동일하므로 두 요소 모두 괜찮습니다. 두 요소의 크기가 일치하지 않으면 UL에 배치해야 합니다. 그래서 다음과 비슷한 코드가 있습니다.

그러면 현재 활성화된 요소를 어떻게 알 수 있나요? 숨겨진 필드나 다른 표시 방법을 사용하여 이벤트를 클릭했을 때 현재 클릭한 요소의 너비와 왼쪽 여백을 저장할 수 있습니다. 데이터를 다시 읽은 후 애니메이션 위치 지정을 진행하면 위의 ③ ④ 코드 부분이 해결됩니다.

$("ul").on({
   'mouseout': function (event) {
      /*动画定位div-hover位置到激活元素*/
    }
});

로그인 후 복사

(물론 메뉴 활성화 요소를 알고 싶다면 클래스가 active인 메소드를 이용해서 찾을 수도 있습니다. 하지만 이 방법이 상대적으로 더 번거롭습니다. 먼저 활성화 요소를 가져온 후 너비를 다시 계산하세요. li을 탐색하여 합산합니다. 마지막으로 값을 할당하고 슬라이딩 위치를 추가합니다. 여기서는 편리하고 간단하기 때문에 임시로 숨겨진 필드 방법을 사용하여 실험할 수 있습니다.

效果展示:

看图发现依旧出现之前类似定位在A或Li的问题,出现这种情况的原因:

jquery中mouseout如果定位在一个元素上,例如div,那么此div之下的元素都会具有mouseout事件,也就是常说的,事件冒泡机制;与此类似的事件如mousedown,mouseover等，那么是不是阻止事件冒泡就行了呢? 理论上是这样的。通常阻止冒泡有两种方式: event.stopPropagation();和return false;当然他们之间也是有区别的。

相关代码修改如下：

<script type="text/javascript">

    ..........

    $(document).ready(function () {
 
      /*鼠标滑出UL或者div-nav背景div-hover自动定位到激活菜单处*/
      $("ul").on({
        'mouseout': function (event) {
          $(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
          /**阻止冒泡**/
          event.stopPropagation();
          //return false;
        }
      });
    });

    .......
</script>

로그인 후 복사

无论何种阻止方式,都没有卵用,依旧阻止不了冒泡,效果可想而知,与上面Gif图所示无异;

由此证明，mouseover在实现此功能方面是有问题的;

那换mouseleave呢，除了将mouseover修改为mouseleave和去除冒泡代码外,其他代码不做改动，实验效果如下:

从上图可以看出,效果与百度新闻导航滑动基本无异,至此大功告成;

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>仿百度新闻菜单滑动动画</title>
  <style type="text/css">
    body, div, ul, li, a
    {
      margin: 0px;
      padding: 0px;
      font-size: 20px;
      color: #FFF;
      border: 0;
    }
    .div-nav-container
    {
      margin-top: 50px;
      width: 100%;
      background-color: #01204F;
    }
    .div-nav
    {
      /*作为div-hover的父元素定位参照*/
      position: relative;
      width: 870px;
      margin: 0px auto;
    }
    .div-hover
    {
      background-color: Red;
      /*以父元素绝对定位*/
      position: absolute;
      height: 50px;
      left: 0px;
      top: 0px;
      width: 0px;
    }
    ul
    {
      list-style: outside none none;
      width: 100%;
      height: 50px;
    }
    ul li
    {
      float: left;
      /*****Start（作用:导航文字浮于div-hover红色之上）*******/
      position: relative;
      z-index: 4;
      /*********************End*************************/
    }
    ul li a
    {
      line-height: 50px;
      display: block;
      padding: 0px 15px;
      text-align: center;
      text-decoration: none;
    }
    /**设置菜单激活***/
    .active
    {
      background-color: Red;
    }
  </style>
  <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
  <script type="text/javascript">

    var divHoverLeft = 0;
    var aWidth = 0;

    $(document).ready(function () {
      //菜单滑动动画
      $("a").on({
         /*此处用mouseover或者mouseenter均可，如果以后要为X标签同时添加悬停和移出事件，建议用enter和leave也就是传说中的hover事件，因为里面事件冒泡已经处理过，就不会出现类似over和out之类的情况了*/
        'mouseenter': function () {
          SetDivHoverWidthAndLeft(this);
          //设置滑动动画
           $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
        },
        'click': function () {
          SetDivHoverWidthAndLeft(this);
          //清除所有a标签class
          $('a').removeClass();
          //设置当前点击菜单为激活状态
          $(this).addClass('active');

          $(".h-width").val(aWidth);
          $(".h-left").val(divHoverLeft);
        }
      });

      /*鼠标滑出UL或者div-nav背景div-hover自动定位到激活菜单处*/
      //mouseleave事件定位到ul或者div-nav均可
      $("ul").on({
        'mouseleave': function (event) {
          $(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
        }
      });
    });

    function SetDivHoverWidthAndLeft(element) {
      divHoverLeft = GetLeft(element);
      aWidth = GetWidth(element);
    }

    //获得Li宽度
    function GetWidth(ele) {
      return $(ele).parent().width();
    }

    //获得div-hover左边距
    function GetLeft(element) {
      //获得li之前的同级li元素
      var menuList = $(element).parent().prevAll();
      var left = 0;
      //计算背景遮罩左边距
      $.each(menuList, function (index, ele) {
        left += $(ele).width();
     });
     return left;
    }
  </script>
</head>
<body>
  <div class="div-nav-container">
    <div class="div-nav">
      <!--添加滑动背景-->
      <div class="div-hover">
      </div>
      <ul>
        <li><a class="active" href="javascript:void(0)">网站首页</a></li>
        <li><a href="javascript:void(0)">热点</a> </li>
        <li><a href="javascript:void(0)">国际新闻</a> </li>
        <li><a href="javascript:void(0)">国内新闻</a> </li>
        <li><a href="javascript:void(0)">国家政策</a> </li>
        <li><a href="javascript:void(0)">体育新闻</a> </li>
        <li><a href="javascript:void(0)">娱乐新闻</a> </li>
        <li><a href="javascript:void(0)">名人</a> </li>
        <li><a href="javascript:void(0)">古迹</a> </li>
      </ul>
    </div>
  </div>
  <input type="hidden" class="h-width" value="110" />
  <input type="hidden" class="h-left" value="0" />
</body>
</html>

로그인 후 복사

总结和关键点
1.背景滑动由某个块状元素(此处用的div)来实现,而非本元素的hover改变背景颜色;

2.注意元素定位(滑动块状元素以谁来绝对定位或者相对定位，左边距的计算和自身宽度的计算；滑动块状元素div-hover和li之间的相对定位，以及层级大小)；

3.滑动动画事件animate和记录激活菜单，鼠标移出区域自定定位到激活菜单；

4.jquery中mouseover，mouseout以及mouseenter，mouseleave关于冒泡机制的区别；（前两个未做冒泡机制的限制，后两个冒泡已经经过处理，事件只针对注册元素本身，而不会对子元素起作用，mouseenter和mouseleave用在一个元素标签上可以用hover事件代替，本身hover就是这两者的封装，如果事件在不同元素标签上，最好分开调用mouseenter和mouseleave事件）

5.所有关键点以及作用都已经在代码各处加上注释，各位可以看看。

希望本文对大家学习jquery程序设计有所帮助。

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7642

Cakephp 튜토리얼

1392

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

150

Related knowledge

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? Apr 04, 2025 am 12:09 AM

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유 Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까? Apr 04, 2025 pm 05:09 PM

동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...

Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까? 또는: Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까? Apr 04, 2025 pm 05:36 PM

이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.

Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까? Apr 04, 2025 pm 05:12 PM

Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...

JavaScript는 배우기가 어렵습니까? Apr 03, 2025 am 12:20 AM

JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.