프로젝트의 요구에 따라 다음 페이지 효과를 만들어야합니다. 사용자가 친구 목록에 친구의 아바타를 통과 할 때 친구의 기본 정보가 표시되며, 이는 실제로 QQ 클라이언트와 유사한 기능입니다.
나는 온라인에서 많은 코드를 발견했고, 기본적으로 그들 모두는 마우스가 중단되고 div가 튀어 나온 후 떠나 자마자 사라 졌다는 것을 깨달았습니다. 이 효과를 달성하는 순수한 CSS 코드도 있지만 나에게는 쓸모가 없습니다. 내가 필요한 것은 JS입니다 (내 데이터는 ajax를 통해 내 데이터를 얻어야하기 때문에 마우스는 떠나 자마자 마우스를 숨길 수 없습니다. 이 div에 기능 항목도 있습니다. 이 페이지 효과는 하루 동안 나를 던져 왔으며, 이는 JS와 CSS 기술을 개선해야한다는 것을 보여줍니다 ...
오랫동안 검색 한 후 마침내 다음과 같이 두 가지 실현 가능한 아이디어를 찾았습니다. 이 두 가지 방법의 예가 있습니다. 나는 그것들을 쓰지 않았고 그것들도 사용하지 않았습니다. 공유하고 데모 주소가 표시됩니다. 내 방법은 방법 B의 아이디어를 나타냅니다.
방법 A :
플로팅 DIV 및 트리거 요소 A를 동일한 상아 요소에 넣고 마우스가 부모 요소를 통과 할 때 디스플레이를 트리거합니다. 이런 식으로, 마우스가 div로 이동할 때, 그것은 여전히 부모 요소 내에 있으며, div는 숨겨지지 않습니다.
방법 B :
마우스가 통과하면 DIV가 나타납니다. 마우스가 A를 떠나면 타이머가 DIV를 끄도록 설정됩니다. 마우스가 div로 이동하면 타이머가 지워집니다.
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
내 방법은 위의 방법 B의 아이디어를 채택합니다. 사용자가 이벤트를 트리거하는 이미지를 남기면 데이터 카드 DIV를 닫기 전에 3 초로 지연해야합니다. 사용자는 해당 작업을 수행 할 시간이 충분합니다. 사용자가 다른 친구 이미지를 클릭하면 숨겨진 메소드가 즉시 호출되어 이전의 개방 및 타이밍 DIV를 닫습니다.
내 메소드의 JS 코드는 다음과 같습니다.
// 이전에 데이터 카드를 표시하기 전에; // 글로벌 변수 함수를 정의합니다. showInfocard (thisobj, id) {this.hidden (preverid); // 즉시 이전에 선택한 DIV를 즉시 숨기기 전에 = id; // alert (id); // var d = $ (thisobj); // var pos = d.offset (); // var t = pos.top + d.height () -5; // 팝업 상자의 상단 위치 // var l = pos.left -d.width () -600; // 팝업 상자의 왼쪽 위치 // $ ( "#"+id) .css ({ "top": t, "left": l}). show (); // var objdiv = $ ( "#"+id); $ (objdiv) .css ( "display", "block"); $ (objdiv) .css ( "왼쪽", event.clientx-280); // 팝업 박스의 x 값은 $ (objdiv) .css ( "top", event.clienty-10)입니다. // 팝업 박스의 y 값은 y 값입니다} 함수 HideInfocard (id) {// 3 초 동안 div // 지연 settimeout ( 'hidden ('+id+')', 3000); } function hidden (id) {$ ( "#"+id) .hide (); }다음은 HTML의 숨겨진 div 코드 스 니펫입니다.
<div id = "id"style = "display : none; 너비 : 250px; 높이 : 150px; 배경색 :#d1eeee; 위치 : 절대;"> </div>
HTML에서는 showinfocard 및 hideinfocard 메소드를 호출하고 다음 진술을 사용하여 마우스 이벤트를 들어야합니다.
OnMouseOver = "showInfocard ( '$ {friend.friendid}')"onMouseOut = "HideInfocard ( '$ {friend.friendid}')"이들은 동적 코드 스 니펫입니다. 그것을 사용할 때는 jquery.js 프레임 워크를 소개해야하며 물론 순수한 JS로 수정할 수도 있습니다. 위의 것이 완료되었습니다. AJAX는 정보를 얻은 다음 JS를 사용하여 위의 DIV에 HTML 코드를 삽입하여 디스플레이를 완료합니다. 마지막으로, 나는 예비 렌더링을 가지고 있습니다.