С самого начала документа подключаем фреймворк и функцию:: Code <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. Code <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> И в документе вставляем изображение: Code <div style="margin:0 auto;width:300px"> <img src="ball_large.png" id="ball" style="width:130px" /> </div> Исходники пример Источник: www.ruseller.com P.S если было не обесутте
|