Node.js 프롬프트 정보 jtip 캡슐화 코드(사진 또는 기사일 수 있음)_javascript 기술

그런데 저는 프론트엔드로 경력을 바꾸었기 때문에 매일 div CSS 등을 하고 있습니다. 오늘은 A 태그와 유사한 title이나 alt 함수를 구현하기 위해 js를 사용하는 방법에 대해 이야기하겠습니다. 우선, title이나 alt 속성이 가져오는 메시지가 너무 간단합니다. , 스타일은 수정할 수 없으며 해당 요소 위로 마우스를 이동한 후 1~3초 정도 기다려야 내용이 표시됩니다. 내용은 단순 텍스트일 뿐이며 html 내용을 추가할 수 없습니다. 요약하자면, 내 자신의 js 프롬프트 상자를 캡슐화해야 합니다. 어쩌면 jquery에는 jtip 구성 요소가 없나요?라고 말할 수도 있습니다. 그렇다, 그것은 당신의 생각이 상당히 전위적이라는 것을 의미한다. 익숙해지면 사용하지 않을 사람이 어디 있겠습니까? 나는 모든 사람이 공부할 수 있도록 이 작은 예를 들었습니다.

먼저 우리가 해야 할 일은 우리가 하는 모든 일이 그러해야 한다는 것입니다. 무언가를 얻자마자 코드 작성을 시작하지 마십시오. 우리는 얻고 싶어하고 그에 대한 비용을 지불합니다. 이것은 사랑에 빠지는 것과 같습니다. 주는 방법을 생각하지 않고 상대방을 얻는 것에 대해 항상 생각할 수는 없습니다. 우리가 원하는 것은 아주 간단할 수도 있고 매우 복잡할 수도 있는 새로운 프롬프트 상자입니다. div를 생각하기 쉽습니다. 그런 다음 마우스가 특정 레이블로 이동하면 시간에 맞춰 마우스 근처에 나타나고 마우스가 멀어지면 사라지기를 바랍니다. 너무 간단해요. 이제 제 생각이 명확해졌으니 예전에는 그렇게 쉬웠던 것 같지 않나요? 글쎄요, 바보들도 가르칠 수 있습니다! 이제 아이디어가 명확해졌으니 이 아이디어에 따라 단계별로 구현해 보겠습니다.

먼저 DIV를 만들고 숨긴 다음 원하는 스타일을 모두 추가하세요. 코드는 다음과 같습니다.

코드를 복사하세요. 코드는 다음과 같습니다.

vartipdiv = document.createElement("div");
tipdiv.id = "txbtip";
tipdiv.style.position = "absolute"
tipdiv.style.padding = " 3px";
tipdiv .style.Background = "#565656";
tipdiv.style.zIndex = "999";
tipdiv.style.border = "1px solid #000";
tipdiv .style.Background = "# F4F8FC";
tipdiv.style.fontsize = "14px";
var rootEle = document.documentElement
rootEle.appendChild(tipdiv); >

그런 다음 추가할 레이블에 onmousemove 이벤트와 onmouseout 이벤트를 추가합니다. 여기서는 추가할 모든 레이블에 공통 클래스 이름(txbtip)을 지정합니다.

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

var txbtip = getElementsByClassName(' txbtip', 'input');>
function getElementsByClassName(n, tag) {
tag = tag || "*"
var classElements = [], allElements = document.getElementsByTagName(tag) ;
for (var i = 0; i n = "" n ""
var cn = " " allElements[i].className " "; 🎜>if (cn.indexOf(n) != -1) {
classElements[classElements.length] = allElements[i];
}
}
return classElements; 🎜>

참고: 이 방법은

코드 복사

코드는 다음과 같습니다. for (vartip in txbtip) { var temp = ""

txbtip[tip].onmouseover = function(e) {

tipdiv.style.display = "block";
var title = this.title;
temp = this.title;
this.title = "";//이렇게 하는 이유는 원래 제목 프롬프트를 지웁니다.
tipdiv.innerHTML = title;
setTipPosition(e);//이 메서드는 팁 상자를 배치하는 데 사용됩니다.
}
txbtip[tip].onmousemove = function(e) {
setTipPosition(e);//이 메서드는 프롬프트 상자의 위치를 ​​지정하는 데 사용됩니다.
}
txbtip[tip].onmouseout = function(e) {
//alert("out");
this.title = temp
temp; >tipdiv.style.display = "none";
}




마지막 단계는 위에 나온 setTipPotion 메서드입니다. 구현은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. function setTipPosition(e ) { e = e || event; tipdiv.style.left = e.clientX 10 'px';

var top = document.body.scrollTop : document.documentElement .scrollTop;

tipdiv .style.top = e.clientY 10 상단 'px'
}


이제 거의 완료되었으므로 뒤집어서 페이지 제본으로 결합할 수 있습니다. 따라서 window.onload에 작성하세요.

window.onload=function(){...}
그러나 이 경우 페이지에 여러 window.onload 이벤트가 발생하여 오류가 발생할 수 있으므로 일부 작업이 필요합니다. 완료됩니다. 게다가 방금 프롬프트 상자의 해당 레이블에는 이미 마우스 이벤트가 있을 수 있으므로 판단을 추가해야 합니다.

if (window.addEventListener) { window.addEventListener("load", 준비, false) } else if (window.attachEvent) { window.attachEvent("onload", 준비) }
다음은 전체 코드입니다
jstip.js
[code]

//******js 텍스트 프롬프트 txb20100119******/

if (window.addEventListener) {
window . addEventListener("load", 준비, false);
} else if (window.attachEvent) {
window.attachEvent("onload", 준비)

함수 준비 ( ) {
var txbtip = getElementsByClassName('txbtip', '*');
vartipdiv = document.createElement("div")
tipdiv.id = "txbtip"; . style.position = "절대";
tipdiv.style.padding = "3px";
tipdiv.style.Background = "#565656";
tipdiv.style.zIndex = 🎜 >tipdiv.style.border = "1px 단색 #000";
tipdiv.style.Background = "#F4F8FC";
tipdiv.style.fontsize = "14px"; = "없음";
var rootEle = document.body || document.documentElement;
rootEle.appendChild(tipdiv)
for (txbtip의 var 팁) {
//alert(txbtip[ 팁 ].id);
var temp = "";
txbtip[tip].onmouseover = function(e) {
tipdiv.style.display = "block"
var title = this . 제목;
this.title = "";
tipdiv.innerHTML = 제목
//alert(제목); 🎜 >}
txbtip[tip].onmousemove = 함수(e) {
setTipPosition(e);
}
txbtip[tip].onmouseout = 함수(e) {
// 경고("out");
this.title = temp;
tipdiv.style.display = "none"
}


function getElementsByClassName(n, tag) {
tag = tag || "*";
var classElements = [], allElements = document.getElementsByTagName(tag); 0 ; i n = "" n ""
var cn = " " allElements[i].className " "; ) != -1) {
classElements[classElements.length] = allElements[i]
}
}
return classElements;
}
function setTipPosition(e) {
e = e || 이벤트;
tipdiv.style.left = e.clientX 10 'px';
var top = document.body.scrollTop : document.documentElement.scrollTop;
tipdiv.style.top = e.clientY 10 상단 'px'
}
}
[코드]







자신만의 js 프롬프트 정보를 캡슐화하는 예 jtip

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title>