Сегодня в уроке Вы узнаете как увеличить любую картинку при нажатии на нее мышкой.
Мне понравился данный трюк. Надеюсь, Вы его также оцените!
С самого начала документа подключаем фреймворк и функцию::
<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>
Ну как? Понравилось? После праздников обещаю Вам уроки на другие темы, не только jQuery :).