jquery를 사용하면 마우스가 슬라이드 위로 이동하여 소스 코드 download_jquery와 함께 더 관련성 높은 정보 레이어가 나타나는 것을 알 수 있습니다.

제한된 공간에 더 많은 정보를 표시하고 싶을 때 상호작용성을 개선하기 위해 마우스를 위로 밀어 더 관련성 높은 정보 레이어를 표시하는 경우가 많습니다. 특히 회사 사진벽, 채용 웹사이트의 구직자 정보 표시 등에 사용할 수 있습니다.

이 기사에서는 예제를 사용하여 jQuery를 사용하여 그림 위로 슬라이드하여 정보를 표시하는 효과를 얻는 방법을 공유합니다. 사진 위에 마우스를 올리면 해당 사진의 상세 소개 정보가 팝업됩니다. 데모 효과를 확인해주세요:

효과 표시 소스코드 다운로드

HTML

먼저 페이지 자료를 준비합니다. 페이지는 여러 그룹의 사진으로 촘촘하게 구성되어 있습니다

동시에 사진에 해당하는 설명 정보가 있어 자세한 정보 효과를 보여줍니다.

<div class="demo"> 
    <ul id="Album"> 
    <li><a href="#" ><em></em><img src="images/2012/05/18/tiezhu18274938.jpg" /></a> 
       <div class="Album_info"><strong>孟祥义</strong><span>企业主</span><span><i>建筑 
</i><i>北京市</i></span></div> 
    </li> 
    ... 
   </ul> 
</div> 

CSS

이미지를 촘촘하게 배열하려면 CSS를 사용해야 하며, 이미지에 해당하는 정보는 기본적으로 숨겨져 있습니다.

.demo{width: 714px; margin:50px auto;} 
#Album li,#Album { list-style: none;} 
#Album{ position: relative; background: url(images/loader.gif) no-repeat center; height: 203px;} 
#Album li { float: left; margin:1px 1px 0px 0px; display: inline;} 
#Album li img { width: 50px; height: 50px;} 
#Album .album_big {float: right;} 
#Album .album_big span { width: 43px; height: 31px; background: url(images/you_s.png); position: 
absolute; right: 0px;bottom: 0px; margin: 0px; padding: 0px; text-indent: -999px; overflow: hidden;} 
.album_big img { width: 101px!important; height: 101px!important;} 
#Album .album_big a { width: 101px!important;height: 101px!important;} 
#Album li strong { display: block; color: #fff; font-size: 12px; line-height: 16px; 
padding: 0px 10px;margin-top: 8px;white-space: nowrap;} 
#Album li span { display: block; color: #fff; font-size: 12px; line-height: 16px; 
padding: 0px 10px; margin-top: 5px; white-space: nowrap;} 
#Album li a { position: absolute; z-index: 100; visibility: hidden;} 
#Album li a em{ width: 100%;position: absolute; top: 0px; left: 0px; display: none; opacity: 0.5; 
filter: alpha(opacity=50); background: #000000;} 
#Album img { border: 0px; border: none;} 
#Album .Album_info { display: none; position: absolute; background: #4bae41; z-index:101; 
-moz-box-shadow: 0 0 10px #000000;-webkit-box-shadow: 0 0 10px #000000;box-shadow: 0 0 10px #000000;} 
#Album .Album_info i{ font-size: 12px; margin-right: 5px; font-style: normal; font-weight: normal;} 

jQuery

효과를 표시하는 데 사용된 js 코드는 album.js에 캡슐화되어 있습니다. 호출하기 전에 jquery.js와 album.js 두 파일을 로드한 다음 효과를 직접 호출하세요.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/album.js"></script> 
<script>
Album.set('#Album');
</script> 

album.js에서는 jquery를 사용하여 요소의 위치를 ​​제어하며, 마우스를 슬라이드하면 다양한 상대 위치 표시 효과가 상하좌우로 표시됩니다. 관심 있는 친구들은 에서 관련 코드를 확인할 수 있습니다. album.js.

위 내용은 jquery를 사용하여 마우스를 올렸을 때 더 관련성 높은 정보 레이어 팝업을 구현하는 방법에 대한 편집자의 소개입니다. 소스 코드 다운로드가 첨부되어 있습니다.