이미지 마우스 온 버블 이펙트 2

제이쿼리 공부 좀 해야 겠습니다.

이와 유사한 팁이 있나 살펴 보았지만 제 눈에는 안 보이길래 올려 봅니다.

출처를 먼저 들어가서 보고 난 후에 필요하시다면 진행하시면 됩니다.
 
http://www.dynamicdrive.com/dynamicindex4/imagebubbles.htm 

<진행>

1. head.sub.php 에 아래를 삽입

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<link href="imgbubbles.css" rel="stylesheet" type="text/css" />

<style type="text/css">

/*CSS for 2 demos on the page*/
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}

#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 60px; /*height of each image*/
}

#squares li{
width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */
height:40px; /*height of image container. Must be taller than contained images (before bubbling) */
}

#squares li img{
width: 31px; /*width of each image before bubbling*/
height: 31px; /*height of each image*/
}

</style>

<script type="text/javascript" src="imgbubbles.js">

/***********************************************
* Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
$('ul#squares').imgbubbles({factor:2.5}) //add bubbles effect to UL id="squares"
})

</script>

2. http://www.dynamicdrive.com/dynamicindex4/imagebubbles.htm 에서 js css 파일 다운로드

3. 아래 소스 중

<ul> <li> 소스만 뽑아 출력하고자 하는 곳에 가공해서 넣으면 됨

<h4>1.75x magnification</h4>
<ul id="orbs" class="bubblewrap">
<li><a href="http://dynamicdrive.com"><img src="orbs/stumbleupon.png" alt="Add to Stumbleupon" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="orbs/facebook.png" alt="Add to Facebook" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="orbs/digg.png" alt="Add to Digg" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="orbs/twitter.png" alt="Add to Twitter" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="orbs/rss.png" alt="Add RSS Feed" /></a></li>
</ul>

<h4>2.5x magnification</h4>
<ul id="squares" class="bubblewrap">
<li><a href="http://dynamicdrive.com"><img src="squares/facebook.png" alt="Add to Facebook" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/delicious.png" alt="Add to Delicious" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/digg.png" alt="Add to Digg" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/stumbleupon.png" alt="Add to Stumbleupon" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/rss.png" alt="Add RSS Feed" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/twitter.png" alt="Add to Twitter" /></a></li>
</ul>