Чтобы увидеть пример работы скрипта зайдите
на сайт по ссылке, наведите мышью на рисунок и нажмите на него левой кнопкой.
Данный скрипт работает при помощи двух файлов, которые нужно загрузить в корень сайта (jquery.magnifier.js и magnify.cur).
1. Вставляете код, что ниже на странице, где должна быть картинка между <HEAD> и </HEAD>
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.magnifier.js">
</script>
2. Следующий код необходимо вставить в то место, где будет располагаться Ваша картинка:
Code
<img src="ocean.gif" class="magnify" style="width:100px; height:56px" />
- загружаете картинку и указываете путь к ней (ocean.gif)
- width="100" height="56" - размер картинки в уменьшенном виде (увеличенная картинка должна настраиваться в файле jquery.magnifier.js).
3. Остается только загрузить готовые файлы jquery.magnifier.js и magnify.cur в корень сайта и скрипт работает!
Увеличение картинки, а также скорость настраивается в файле jquery.magnifier.js в коде:
Code
dsettings: {
magnifyby: 3, //default increase factor of enlarged image
duration: 500, //default duration of animation, in millisec
mgopacity: 0.2 //opacify of original image when enlarged image overlays it
},
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
- где 3 - во сколько раз увеличивается картинка от заданного (в нашем примере это 100х56)
- 500 - продолжительность анимации (скорость появления)
4
The_FactioN
19.10.2010 15:44:11
а где мне скачать jquery файлик?
Цитировать |
Редактировать |
Удалить
