С самого начала документа подключаем фреймворк и функцию::
Code
<script src="jquery.tools.min.js">"jsContainer">"jsCode">"htmContainer"></script>
<script>"jsContainer">"jsCode">
"commCol">"blueColSimp">/"blueColSimp">*
perform JavaScript after "purpleColSimp">document is scriptable, see"blueColSimp">:
http"blueColSimp">://docs.jquery.com"blueColSimp">/How_jQuery_Works#Launching_Code_on_Document_Ready
"blueColSimp">*"blueColSimp">/
$"brackets">(function"brackets">("brackets">) "brackets">{
"commCol">// setup exposing
$"brackets">("invComm">"#ball""brackets">).expose"brackets">("brackets">{
"commCol">// a custom mask ID
maskId"blueColSimp">:"invComm">'mask',
"commCol">// grow the ball when exposing starts
onBeforeLoad"blueColSimp">: function"brackets">("brackets">) "brackets">{
"blueColSimp">this.getExposed"brackets">("brackets">).animate"brackets">("brackets">{width"blueColSimp">: "redCol">298"brackets">}"brackets">);
"brackets">},
"commCol">// shrink the ball when exposing closes
onBeforeClose"blueColSimp">: function"brackets">("brackets">) "brackets">{
"blueColSimp">this.getExposed"brackets">("brackets">).animate"brackets">("brackets">{width"blueColSimp">: "redCol">130"brackets">}"brackets">);
"brackets">}
"commCol">// perform exposing when image is clicked
"brackets">}"brackets">)."purpleColSimp">click"brackets">(function"brackets">("brackets">) "brackets">{
$"brackets">("blueColSimp">this"brackets">).expose"brackets">("brackets">).load"brackets">("brackets">);
"brackets">}"brackets">);
"brackets">}"brackets">);
"htmContainer"></script>
Далее подключаем стили оформления. Буквально пару строк и все готово. К эффекту увеличения имеет отношение только класс #mask.
Code
[/code]
И в документе вставляем изображение:
[code]<div style="margin:0 auto;width:300px">
<img src="ball_large.png" id="ball" style="width:130px" />
</div>
