Selasa, 24 Januari 2012

Icon zoomer

  • Add to Facebook
  • Add to Digg
  • Add to Twitter
  • Add RSS Feed


Coba anda arahkan kursor muose anda pada menu icon diatas, maka gambar menu icon akan berubah bentuk menjadi besar.
Atau  klik disini untuk melihat contohnya langsung..
Oke langsung saja copy paste script kodenya dibawah ini




Script kode


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


<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}

.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}
#orbs li{
width: 65px;
height:60px;
}

#orbs li img{
width: 55px;
height: 60px;
}

#squares li{
width: 45px;
height:40px;
}

#squares li img{
width: 31px;
height: 31px;
}

</style>


/***********************************************
* Script code by www.kikiyo.co.cc dont change this
***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.75}) //by www.kikiyo.co.cc
$('ul#squares').imgbubbles({factor:2.5}) //by www.kikiyo.co.cc
})

</script>

<ul id="orbs" class="bubblewrap">
</ul>

0 komentar:

Posting Komentar