큰 이미지의 효과를 표시하기 위해 작은 이미지로 마우스를 이동하는 JQuery 메서드-JS 튜토리얼-php.cn

큰 이미지의 효과를 표시하기 위해 작은 이미지로 마우스를 이동하는 JQuery 메서드

WBOY

풀어 주다： 2016-05-16 15:55:50

원래의

1541명이 탐색했습니다.

이 기사의 예에서는 JQuery를 사용하여 작은 이미지에 마우스를 이동하여 큰 이미지의 효과를 표시하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

여기서 큰 그림을 표시하는 기능은 이전 글 "하이퍼링크 마우스 프롬프트 효과를 구현하는 JQuery 방법"과 유사하며, 코드를 조금만 수정하면 그림 프롬프트 효과를 만들 수 있습니다.

이전 하이퍼링크 프롬프트 효과에 대한 코드를 참고하세요. 생성된 div 요소의 코드를 다음과 같이 변경하면 됩니다.

//创建 div 元素 图片提示
var tooltip = "<div id="tooltip"><img src=""+ this.href +"" alt="预览图"><\/div>"; 
</div>

로그인 후 복사

사진 위에 마우스를 올리면 디스플레이에 큰 사진 프롬프트 효과가 나타납니다. 효과를 더욱 인간적으로 만들려면 그림에 설명 텍스트를 추가해야 합니다. 즉, 그림의 해당 소개 텍스트가 메시지가 표시되는 큰 그림 아래에 나타납니다.

하이퍼링크의 title 속성 값을 기반으로 해당 이미지의 소개 텍스트를 얻을 수 있습니다.

this.myTitle = this.title; 
this.title = "";  
var imgTitle = this.myTitle&#63; "<br />" + this.myTitle : "";

로그인 후 복사

그런 다음 다음 코드를 사용하여 div 요소에 추가합니다.

// 创建 div 元素
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>";

로그인 후 복사

this.myTitle이 ""인지 판단할 때 삼항 연산을 사용합니다. 삼항 연산 구조는 다음과 같습니다. 값 1: 값 2. 첫 번째 매개변수는 부울 값이어야 합니다. 물론, 삼항 연산은 "if(){ }else{ }"로 대체될 수도 있습니다. 예:

var imgTitle; 
if (this.myTitle) { 
  imgTitle = "<br />" + this.myTitle; 
} else { 
  imgTitle = ""; 
}

로그인 후 복사

이렇게 하면 사진 프롬프트 효과가 완성됩니다. 사진 위에 마우스를 올리면 사진의 큰 미리보기가 나타나고 큰 사진 아래에 소개 텍스트가 표시됩니다.

이 예제의 전체 코드는 다음과 같습니다.

<script type="text/javascript">
//<![CDATA[
$(function(){
  var x = 10;
  var y = 20;
  $("a.tooltip").mouseover(function(e){
    this.myTitle = this.title;
    this.title = "";  
    var imgTitle = this.myTitle&#63; "<br/>" + this.myTitle : "";
    var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='预览图'/>"+imgTitle+"<\/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(); //移除 
 }).mousemove(function(e){
    $("#tooltip")
      .css({
        "top": (e.pageY+y) + "px",
        "left": (e.pageX+x) + "px"
      });
  });
})
//]]>
</script>

로그인 후 복사

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