JS는 친구 목록_javascript 스킬에서 친구의 아바타 위로 마우스가 지나갈 때 데이터 카드가 출력되는 효과를 구현합니다.

프로젝트의 필요에 따라 다음과 같은 페이지 효과를 만드는 것이 필요합니다. 사용자가 친구 목록에 있는 친구의 아바타 위에 마우스를 올리면 친구의 기본 정보가 표시되는데, 이는 실제로 유사한 기능입니다. QQ 클라이언트에.

인터넷에서 많은 코드를 찾았는데 기본적으로 마우스를 올리면 div가 팝업되고 떠나면 즉시 사라집니다. 이 효과를 얻을 수 있는 순수한 CSS 코드도 있지만 나에게는 쓸모가 없습니다. 필요한 것은 JS이며(내 데이터는 Ajax를 통해 얻어야 하기 때문에) 마우스가 떠난 후 즉시 숨길 수 없는 기능이 있습니다. 이 사업부에서. 이 페이지의 효과는 하루 종일 걸렸으며 이는 내 JS 및 CSS 기술을 향상시켜야 함을 보여줍니다...

오랜 시간 검색 끝에 마침내 다음과 같은 두 가지 가능한 아이디어를 찾았습니다. 이 두 가지 방법의 예는 제가 작성한 것이 아니며 여기서 공유하고 싶습니다. >데모 주소. 내 방법은 방법 B의 아이디어를 말합니다.

방법 A:

플로팅 div와 트리거 요소 a를 동일한 상위 요소에 배치하고 마우스가 상위 요소 위로 지나갈 때 디스플레이를 트리거합니다. 이런 방식으로 마우스를 div로 이동하면 여전히 상위 요소 내에 있으므로 div가 숨겨지지 않습니다.

방법 B:

마우스가 a를 지나면 div가 팝업됩니다. 마우스가 a를 벗어나면 타이머를 설정하여 div로 마우스를 이동하면 타이머가 지워집니다.

————————————————————————————————————————————————— —————————————————————

내 방법은 위의 방법 B의 아이디어를 기반으로 합니다. 사용자가 이벤트를 트리거한 이미지를 떠나면 3초의 지연 후에 데이터 카드 div가 닫힙니다. 사용자가 다른 친구를 클릭하면 친구 이미지가 표시되면 숨겨진 메소드가 즉시 호출되어 이전에 열려 있던 타이밍 div를 닫습니다.

내 메소드의 JS 코드는 다음과 같습니다.

//显示资料卡 
var beforeId; //定义全局变量 
function showInfoCard(thisObj,id){ 
this.hidden(beforeId); //立刻隐藏前一个选中弹出来的div 
beforeId = 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("left", event.clientX-280); //弹出框的位置X值 

$(objDiv).css("top", event.clientY-10); //弹出框位置Y值 
} 
function hideInfoCard(id){ //隐藏div 
//延时3秒 
setTimeout('hidden('+id+')',3000); 
} 

function hidden(id){ 
$("#"+id).hide(); 
}

다음은 HTML의 숨겨진 div 코드 조각입니다.

<div id="id" style="display:none; width:250px; height:150px; background-color:#D1EEEE;position:absolute;"></div>

HTML에서는 showInfoCard 및 hideInfoCard 메소드를 호출하고 다음 명령문을 사용하여 마우스 이벤트를 수신해야 합니다.

onmouseover="showInfoCard(this,'${friend.friendId}')" onmouseout="hideInfoCard('${friend.friendId}')" 

이는 동적 코드 조각입니다. 이를 사용하려면 jquery.js 프레임워크를 도입해야 합니다. 물론 순수 JS로 수정할 수도 있습니다. 위 작업이 완료되면 AJAX가 정보를 얻은 다음 JS를 사용하여 위 div에 HTML 코드를 삽입하여 표시를 완료합니다. 마지막으로 꽤 보기 흉한 예비 렌더링이 있습니다...