jQuery는 마우스가 it_jquery 위로 미끄러질 때 그림이 팝업되는 특수 효과를 구현합니다.-JS 튜토리얼-php.cn

jQuery는 마우스가 it_jquery 위로 미끄러질 때 그림이 팝업되는 특수 효과를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:21:08

원래의

1297명이 탐색했습니다.

이 장에서는 일반적으로 사용되는 효과를 소개합니다. 즉, 마우스를 링크 위로 슬라이드하면 마우스 포인터의 움직임을 따르는 레이어가 나타날 수 있습니다. 실제 응용 프로그램에서는 일반적으로 링크에 대한 설명 텍스트나 그림이 나타납니다. 등. 잠깐,

먼저 데모 사진을 보시죠

다음은 코드 예시입니다.

<link rel="stylesheet" href="../css/common.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$(function(){
	$("a.preview").preview();	 
});
</script>
<style type="text/css">
html{overflow-y:scroll;}
a.preview,a.preview:hover{text-decoration:none;}
a.preview img{margin:20px 10px;}
</style>
</head>

<body>
<div class="zxx_out_box">
 <div class="zxx_in_box">
  <h3 class="zxx_title">图片放大显示的jQuery插件演示页面</h3>
  <div class="zxx_main_con">
			<div class="zxx_test_list">
   	<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm1.jpg" title="张含韵">
    	<img src="http://image.jb51.net/image/study/s/s128/mm1.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm2.jpg" title="某不知名美女">
    	<img src="http://image.jb51.net/image/study/s/s128/mm2.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm3.jpg" title="某不知名美女">
    	<img src="http://image.jb51.net/image/study/s/s128/mm3.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm4.jpg" title="某不知名美女">
    	<img src="http://image.jb51.net/image/study/s/s128/mm4.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm5.jpg" title="某不知名美女">
    	<img src="http://image.jb51.net/image/study/s/s128/mm5.jpg" />
    </a>
   </div>   
  </div>

 </div>
</div>
</body>
</html>

로그인 후 복사

위 코드는 우리의 요구 사항을 충족했습니다. 여러분의 생각은 어떻습니까?

다음으로 사용 방법에 대해 간략하게 설명하겠습니다.

1. a 태그의 href 속성을 사용해야 합니다. 이 jQuery 플러그인의 원리는 마우스가 썸네일(또는 링크 텍스트)로 이동하면 href 포인팅 경로가 포함된 큰 이미지 html 조각입니다. 이 조각은 마우스 위치를 기준으로 절대 위치가 지정됩니다. 이는 더 큰 이미지를 표시하기 위해 썸네일 위로 마우스를 이동하는 효과를 생성합니다. 큰 이미지의 주소는 a 태그의 href 속성 내용입니다. 예: Thumbnail 태그에 큰 이미지를 표시하는 방법이 포함되어 있는 경우 페이지에는 href가 가리키는 "xx.jpg" 이미지가 표시됩니다.

2. 사용되는 방법은 다음과 같습니다. target selector.preview() 예를 들어 위의 thumbnail의 경우 $("a")를 사용할 수 있습니다. .preview(); 이 코드는 마우스를 텍스트 링크 "Thumbnail"로 이동할 때 xx.jpg 이미지를 표시하는 효과를 구현합니다.

3. png, gif, jpg, bmp의 네 가지 형식만 지원됩니다. 플러그인 코드의 정규식을 수정하여 지원되는 이미지 형식 유형을 확장할 수 있습니다.

실시 과정을 간략히 소개하면 다음과 같습니다.

1. 코드 주석:

1.this.screenshotPreview=function(){ }, 다음 효과를 구현하는 함수를 선언합니다. 이 효과에서는 실제로 생략할 수 있으며 창을 가리킵니다.

2.xOffset=10, 팝업 이미지에서 마우스 포인터의 수평 거리를 지정하는 변수를 선언합니다.

3.yOffset=30, 팝업 이미지에서 마우스 포인터의 수직 거리를 지정하는 변수를 선언합니다.

4.$("a.screenshot").hover(function(e){}, function(e){})는 마우스가 링크로 이동하고 링크를 떠날 때 실행될 함수를 지정합니다.

5.this.t = this.title, 링크의 title 속성 값을 t 속성에 할당합니다. 여기서 이는 현재 마우스를 가리키면 가리키는 링크 개체입니다.

6.var c = (this.t != "") ? "
" this.t : "", this.t가 비어 있지 않으면, 즉 제목 속성 값이 존재합니다. 그런 다음 개행 문자를 삽입하고 현재 헤더 내용을 연결합니다. 그렇지 않으면 c를 비어 있게 설정합니다.

7.$("body").append("

" c "

") , 본문에 그림과 관련 설명을 추가합니다.

8.$("#screenshot").css("top",(e.pageY-xOffset) "px").css("left",(e.pageX yOffset) "px").fadeIn( "fast"), p 요소의 상단 및 왼쪽 속성값을 설정하고 페이드인 효과를 사용하여 표시합니다.

9.this.title=this.t, this.title에 제목 내용을 할당합니다. 사실 이 문장이 없어도 문제는 없고 약간 중복됩니다.

10.$("#screenshot").remove(), p 요소를 제거합니다.

11.$("a.screenshot").mousemove(function(e){}), 마우스 포인터가 움직일 때 따라갈 그림을 설정하는 데 사용됩니다.

12.$("#screenshot").css("top",(e.pageY-xOffset) "px") .css("left",(e.pageX yOffset) "px"), p 설정 요소의 상단 및 왼쪽 속성 값은 다음과 같은 효과를 얻을 수 있습니다.

2. 관련자료:

1. hover() 함수는 jQuery의 hover 이벤트 장에서 찾을 수 있습니다.
2. Append() 함수에 대해서는 jQuery의 Append() 메소드장을 참조하세요.
3. css() 함수에 대해서는 jQuery의 css() 메서드 장을 참조하세요.
4. pageY 속성에 대해서는 jQuery의 event.pageY 속성 장을 참조하세요.
5. fadeIn() 함수에 대해서는 jQuery의 fadeIn() 메소드 장을 참조하세요.
6. 제거() 함수에 대해서는 jQuery의 제거() 메소드장을 참조하세요.
7. mousemove 이벤트에 대해서는 jQuery의 mousemove 이벤트장을 참고하세요.