하이퍼링크 마우스 프롬프트를 구현하는 JQuery 메서드

이 기사의 예에서는 JQuery가 하이퍼링크의 마우스 프롬프트 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

브라우저에는 이미 하이퍼링크 프롬프트가 제공됩니다. 하이퍼링크에 제목 속성만 추가하면 됩니다. 그러나 이 프롬프트 효과의 응답 속도는 약 1초 정도 지연될 정도로 매우 느립니다. 지금 필요한 것은 마우스가 하이퍼링크로 이동하는 순간 프롬프트가 나타나도록 하는 것입니다. 이때 a 태그에 있는 타이틀 프롬프트 효과를 제거하고 비슷한 기능의 프롬프트를 직접 만들어 주셔야 합니다.

HTML 디자인은 다음과 같습니다.

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

스크립트 하우스에 오신 것을 환영합니다

그런 다음 클래스 툴팁이 있는 하이퍼링크에 대한 마우스오버 및 마우스아웃 이벤트를 추가하세요.

$("a.tooltip").mouseover(function (){  
    //显示 title  
}).mouseout(function (){  
    //隐藏 title  
});

이 효과를 달성하기 위한 구체적인 아이디어는 다음과 같습니다.

1. 하이퍼링크에 마우스가 슬라이드되면 div 요소를 생성하고 div 요소의 내용은 title 속성의 값이 됩니다. 그러면 생성된 요소가 문서에 추가됩니다. 마우스 위치 옆에 표시되도록 x 및 y 좌표를 설정합니다.
2. 마우스가 하이퍼링크 밖으로 미끄러지면 div 요소를 제거합니다.

분석 아이디어에 따라 다음 JQuery 코드를 작성합니다.

$(function(){  
  var x = 10;   
  var y = 20;  
  $("a.tooltip").mouseover(function(e){  
    this.myTitle = this.title;  
    this.title = "";    
    var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
    //创建 div 元素  
    $("body").append(tooltip); //把它追加到文档中  
    $("#tooltip")  
      .css({  
        "top": (e.pageY + y) + "px",  
        "left": (e.pageX + x) + "px" 
      }).show("fast"); //设置x坐标和y坐标，并且显示  
  }).mouseout(function(){    
    this.title = this.myTitle;  
    $("#tooltip").remove(); //移除  
  });  
});

이때 효과에는 두 가지 문제가 있습니다. 첫째, 마우스를 슬라이드하면 a 태그의 title 속성 프롬프트도 나타납니다. 둘째, x 좌표와 y 좌표 설정 문제가 있습니다. 자체 제작 프롬프트와 마우스 사이의 거리에 너무 가까우면 프롬프트가 표시되지 않는 등의 문제가 발생할 수 있습니다(마우스 초점 변경으로 인해 마우스 아웃 이벤트가 발생함).

a 태그에서 제목 프롬프트 기능을 제거하려면 다음 단계를 수행해야 합니다.

1. 마우스가 안으로 들어가면 객체에 새 속성을 추가하고 이 속성에 제목 값을 전달한 다음 속성 제목 값을 지웁니다.

this.myTitle = this.title;  
s.title = "";   
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
//创建 div 元素

2. 마우스를 슬라이드 아웃하면 객체의 myTitle 속성 값이 속성 제목에 할당됩니다.

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

this.title = this.myTitle;

마우스를 슬라이드 아웃할 때 속성 제목에 속성값을 할당해야 하는 이유는 무엇인가요? 마우스가 슬라이드 아웃될 때 다시 슬라이드 인할 때 속성 제목의 값을 고려해야 하기 때문입니다. myTitle의 값이 title 속성에 다시 할당되지 않으면 마우스가 다시 슬라이드 인될 때 제목의 값이 비어 있게 됩니다.

두 번째 문제를 해결하려면 프롬프트 요소의 상단 및 왼쪽 값을 재설정해야 합니다. 코드는 상단에 10px, 왼쪽에 20px을 추가합니다.

var x = lO;  
var y = 20;  
$("#tooltip").css({  
    "top": (e.pageY+y) + "px",  
    "left": (e.pageX+x) + "px" 
});

자, 여기서 문제는 해결되었고, 마우스 하이퍼링크 프롬프트 효과가 실현되었습니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.