С самого начала документа подключаем фреймворк и функцию:: <script src="jquery.tools.min.js"></script>
<script>
/*
perform JavaScript after document is scriptable, see:
http://docs.jquery.com/How_jQuery_Works#Launching_Code_on_Document_Ready
*/
$(function() {
// setup exposing
$("#ball").expose({
// a custom mask ID
maskId:'mask',
// grow the ball when exposing starts
onBeforeLoad: function() {
this.getExposed().animate({width: 298});
},
// shrink the ball when exposing closes
onBeforeClose: function() {
this.getExposed().animate({width: 130});
}
// perform exposing when image is clicked
}).click(function() {
$(this).expose().load();
});
});
</script>
Далее подключаем стили оформления. Буквально пару строк и все готово. К эффекту увеличения имеет отношение только класс #mask. <style>
body {
padding:150px 50px;
font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
#mask {
background:#072a88 url(mask_star_1600px.jpg) no-repeat scroll 50% -274px;
}
</style>
И в документе вставляем изображение: <div style="margin:0 auto;width:300px">
<img src="ball_large.png" id="ball" style="width:130px" />
</div>
Исходники
| 
Меню сайта
Меню сайта
