1. 응용 프로그램 시나리오
DIV는 마우스 호버를 팝업하고 마우스 퇴치 직후에 숨길 수 없습니다.이 DIV에 기능 포털도 있기 때문입니다. 예를 들어:
친구 목록에서 마우스가 친구의 아바타를 통과 할 때 프로필 카드를 표시하는 효과는 다음과 같습니다.
호버 할 때 QR 코드를 표시합니다
2. 실현
다음과 같은 간단한 효과를 사용하십시오 : 마우스 호버는 A에 b를 표시하여 시뮬레이션하십시오.
이를 구현하는 두 가지 방법이 있습니다. 두 번째는 권장됩니다. 첫 번째는 단점이 있습니다. 아래에 대해 이야기하겠습니다.
1. 방법 1
원리 : 트리거 요소 A와 표시된 요소 B를 동일한 상아 요소에 넣고 마우스가 부모 요소를 통과 할 때 디스플레이 B가 트리거됩니다. 이런 식으로 마우스가 B로 이동하면 DIV가 숨겨지지 않습니다.
암호:
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> 쇼 b </title> <script src = "http://code.jquery.com/jquery-1.12.2.min.js"> 여백 : 10px 0 10px 10px; 너비 : 50px; 높이 : 50px; 배경색 : #CCC; }#msg-box {테두리 : 1px solid black; 너비 : 200px; 높이 : 150px; 디스플레이 : 없음; 플로트 : 왼쪽; 패딩 : 10px} </style> </head> <body> <div id = "hoverwrap"> <div id = "hook"> a </div> <div id = "msg-box"> 함수 모듈 b </div> </div> <script type = "text/javascript"> $ ( "#hoverwap"). $ ( "#msg-box"). toggle ();}); </script> </body> </html>이 방법은 구현하기가 비교적 간단하지만 상위 태그 레이어를 감싸는 것이 필요하며 단점이 있습니다. 두 요소는 간격을 두지 못합니다.
2. 방법 2
원리 : 마우스가 A가 통과하면 B가 팝업되고 A가 a를 이동하고 타이머를 0.5 초로 지연시킨 다음 B를 닫으므로 A로 이동할 때 판단해야합니다. 타이머가 있으면 타이머를 먼저 지우고 B를 표시해야합니다.
사용자가 이벤트를 트리거하는 A를 떠나면 데이터 카드 DIV를 닫기 전에 0.5 초로 지연해야합니다. 사용자는 해당 작업을 수행 할 시간이 충분합니다. 마우스가 데이터 카드 B로 이동하면 B의 타이머는 이전에 B를 닫습니다.
전체 코드는 다음과 같습니다.
<! docType html> <html> <head> <meta charset = "utf-8"/> <title> 쇼 b </title> <script src = "http://code.jquery.com/jquery-1.12.2.min.js"> 여백 : 10px; 너비 : 50px; 높이 : 50px; 배경색 : #CCC; }#msg-box {테두리 : 1px solid black; 너비 : 200px; 높이 : 150px; 디스플레이 : 없음; 플로트 : 왼쪽; 패딩 : 10px} </style> </head> <body> <div id = "hook"> a </div> <div id = "msg-box"> 함수 모듈 b </div> <script type = "text/javaScript"> var 타이머; $ ( "#hook,#msg-box"). bind ( "마우스 오버", showmsgbox); $ ( "#hook"). bind ( "mouseout", hidemsgbox); $ ( "#msg-box"). bind ( "mouseout", function () {if (timer) {timer);} $ ( "#msgbox" showmsgbox () {if (timer) {cleartimeout (timer);} $ ( "#msg-box"). show ();} 함수 hidemsgbox () {timer = settimeout () {$ ( "#msg-box")JS 부분 :
<script type = "text/javascript"> var timer; $ ( "#hook,#msg-box"). bind ( "mouseover", showmsgbox); $ ( "#hook"). bind ( "mouseout", hidemsgbox); $ ( "#msg-box"). $ ( "#msg-box"). hide (); function showmsgbox () {if (timer) {clartimeout (timer);} $ (show ();} {timer = settimeout () {$ ( "#msg-box")주목해야 할 것
1. MouseMove 대신 마우스 오버를 사용하여 이벤트를 트리거하십시오.
마우스 오버 : 마우스가 대상 요소 위로 움직일 때 트리거됩니다.
MouseMove : 요소 내부로 이동할 때 마우스가 계속 트리거됩니다.
따라서 마우스 오버 및 마우스 미브는 자원을 소비합니다.
자세한 내용은 http://www.cnblogs.com/starof/p/4106904.html을 참조하십시오
2. 타이머를 호출하기 전에 선언하십시오
선언되지 않으면 마우스를 처음으로 옮길 때 타이머가 선언되지 않으므로 마우스가 처음으로 이동할 때 오류가보고됩니다.
3. 마우스 오버 이벤트를 호출하기 전에 타이머를 지워야합니다.
지우지 않으면 B는 0.5 초 후에 자동으로 닫힙니다.
3. 보편적 인 기능으로 패키지
이 기능이 더 일반적이라는 점을 고려하면 포장됩니다. JS는 일부 호환성 문제를 처리해야하므로 jQuery로 작성되었습니다.
/*** @description 마우스 호버는 OHOOK로 OMSGbox를 표시합니다. * @Author liuxiaoyan* @date 2016-03-24 15 : 01 : 13* @last modified by : liuxiaoyan* @last modified time : 2016-03-24 15:01:13* // *** @Param Ohook : 호버 호버 요소* @param omsgbox : hover에 표시해야 할 요소* 호출. hovershowmsg.init ({hook : $ ( ". viewphone"), msgbox : $ ( ". viewphonescan")});*/var hovershowmsg = (function () {var ohook, omsgbox, timer; function (o) {o) {o.) OHOK.BIND ({MouseOver : MouseOut : Hidemsgbox}); omsgbox.hide (), 500);위의 것은 QQ Friend Avatar Hover를 기반으로 JS를 기반으로 정보 카드를 표시하는 효과를 달성하는 방법의 전체 내용입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. 편집자는 제 시간에 답장을 드릴 것입니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!