WordPress_javascript 기술에서 마우스 오버 시 댓글 및 인용 버튼 표시 및 숨기기 구현-JS 튜토리얼-php.cn

WordPress_javascript 기술에서 마우스 오버 시 댓글 및 인용 버튼 표시 및 숨기기 구현

WBOY

풀어 주다： 2016-05-16 15:20:19

원래의

2039명이 탐색했습니다.

마우스 오버에 따른 버튼 표시, 숨기기, 답장 및 인용 버튼
아이디어와 원칙
원리는 매우 간단합니다. Jquery 매뉴얼을 한두 페이지 이상 읽어보셨다면
그러면 다음의 원리 설명을 확실히 이해할 수 있을 것입니다. 그렇지 않으면 코드 구현 영역으로 이동하여 읽어 보십시오.
아이디어는 매우 간단합니다.

답글 및 인용 버튼을 원하는 위치에 배치하고 CSS 스타일을 표시:없음;
으로 설정합니다. Jquery의 호버 동작을 마우스 호버 후 버튼이 표시되기를 원하는 영역에 바인딩합니다.
아주 간단하지 않나요? 예전에 블로그를 했다면 여기서 끝났을텐데,
자, 이제 인어를 가르치고 있으니 계속 해보자….

특수효과 코드 구현 부분
답글과 인용문을 위한 HTML 코드

코드 복사 코드는 다음과 같습니다.

답글 인용문 < /div>

답글 및 인용문에 대한 CSS 스타일 설정

   .comment-act{display:none;}
Jquery（ Javascript ） 代码部分
注：li.comment 是我每一条评论所在的区域
   $('li.comment').hover(//注1
 function(){
 $(this).find('div.comment-act').fadeIn(400);
 },
 function(){
 $(this).find('div.comment-act').fadeOut(400);
 });

로그인 후 복사

특수효과 코드 강화 및 고급 확장
Jquery 특수효과를 제작하다 보면 이런 상황이 자주 발생하는데,
호버 애니메이션 효과로 두 영역을 계속 왔다 갔다 하는 극한 사용자도 있습니다(테스트?),
특수 효과 표시는 일반적으로 표시 시간을 설정하므로 여기서는 400밀리초로 설정합니다.
분명히 사용자의 마우스가 앞뒤로 전환하는 데는 약 100밀리초, 또는 그보다 더 짧은 시간밖에 걸리지 않습니다.
마우스가 움직이지 않는 경우에도 끊임없이 앞뒤로 전환하면 애니메이션 대기열이 생성되는 경우가 많습니다.
마지막 마우스 움직임에 반응할 때까지 특수 효과도 이전 마우스 움직임에 따라 숨겨지고 표시됩니다.
제가 말씀드린 상황은 흔한 상황은 아니지만, 댓글이 많으면
그리고 방문자는 콘텐츠를 탐색하기 위해 계속 마우스를 위아래로 슬라이드합니다. 이런 상황이 발생하기 쉽나요?
짜증나지 않나요?
이는 짜증스러울 뿐만 아니라 클라이언트 브라우저의 로드를 증가시키고 웹사이트 효율성에 영향을 미치며 나쁜 사용자 경험을 만들어냅니다.
문제에 대한 해결책은 실제로 매우 간단합니다. hover의 콜백 함수 매개변수를 사용하여 애니메이션 대기열을 종료합니다.

   $('li.comment').hover(//注1
 function(){
 $(this).find('div.comment-act').fadeIn(400);
 },
 function(){
 $(this).find('div.comment-act').fadeOut(400,function(){$(this).stop(true);});
 });

로그인 후 복사

마우스를 밖으로 움직일 때 모든 애니메이션을 중지하고 싶기 때문에
따라서 회신 및 참조 버튼을 숨기기 위해 마우스가 밖으로 이동한 후 이 영역에서 애니메이션 대기열을 종료합니다.
실제 측정에 따르면 MG12의 블로그에서는 지금까지 이 상황을 다루지 않았습니다(게으른? 불필요한?).
그의 블로그를 비교해 보세요. 하하!
참고 1: hover는 hover 이벤트(마우스가 객체 위 또는 객체 밖으로 이동)를 시뮬레이션하는 방법입니다. 이것은 사용자 정의 방법입니다.
자주 사용되는 작업에 대해 "유지" 상태를 제공합니다.
일치하는 요소 위로 마우스를 이동하면 첫 번째로 지정된 기능이 트리거됩니다. 마우스가 이 요소 밖으로 이동하면 지정된 두 번째 기능이 트리거됩니다.

댓글 작성자 정보 표시 및 숨기기
많은 테마에는 페이지 길이를 줄이고 사용자 경험을 향상시키기 위해 설계된 이 기능이 있습니다. 내 테마는 원래 이 기능을 예약했지만 게으른 관계로 수정하지 않았습니다. 요즘 몸이 안 좋아서 게을러서 블로그 활동에 신경을 못 썼는데, 블로그 활동만 안 하면 그냥 한가할 것 같은 느낌이 듭니다.

수정을 바랍니다
JS 코드는 다음과 같습니다.

 var cmtinfo = jQuery('#cmtinfo');
if (cmtinfo.length>0){
var hideinfo = cmtinfo.find('#hide_author_info');
var showinfo = cmtinfo.find('#show_author_info');
var authorinfo = jQuery('#author_info');
authorinfo.hide();
showinfo.click(function(){jQuery(this).fadeOut(function(){hideinfo.fadeIn();});authorinfo.fadeIn();});
hideinfo.click(function(){jQuery(this).fadeOut(function(){showinfo.fadeIn();});authorinfo.fadeOut();});
}

#cmtinfo 是有信息的访客所显示访客新的一个 DIV

#hide_author_info、#show_author_info 一个是隐藏按钮一个是显示按钮

#author_info 是 #cmtinfo 的一个子 DIV

로그인 후 복사