2D управляемое слайдшоу изображений - " стопка изображений "
QR код

2D управляемое слайдшоу изображений на основе jQuery системы , по клику на изображении с различным углом расположения изображений в стопке изображений

Главная страница сайта .
HTML данного примера .
<script type="text/javascript" charset="utf-8" src="http://runettex.clan.su/JSC/stopka.js"></script>
<script type="text/javascript" charset="utf-8" src="http://runettex.clan.su/JSC/jQueryRotate.2.1.js"></script>
<script type="text/javascript"charset="utf-8" >
$(document).ready(function(){$('#src01').rotate(1);});
$(document).ready(function(){$('#src02').rotate(-1.7);});
$(document).ready(function(){$('#src03').rotate(3.1);});
$(document).ready(function(){$('#src04').rotate(-1);});
$(document).ready(function(){$('#src05').rotate(-2.2);});
$(document).ready(function(){$('#src06').rotate(1.7);});
$(document).ready(function(){$('#src07').rotate(-2.6);});
$(document).ready(function(){$('#src08').rotate(3.5);});
$(document).ready(function(){$('#src09').rotate(2.4);});
</script>
<div id="gallery"><div id="next"><a href="#next"><span id="pictures">
<img id="src01" src="http://runettex.clan.su/FPC/WP01.jpg" alt="">
<img id="src02" src="http://runettex.clan.su/FPC/WP02.jpg" alt="">
<img id="src03" src="http://runettex.clan.su/FPC/WP03.jpg" alt="">
<img id="src04" src="http://runettex.clan.su/FPC/WP04.jpg" alt="">
<img id="src05" src="http://runettex.clan.su/FPC/WP05.jpg" alt="">
<img id="src06" src="http://runettex.clan.su/FPC/WP06.jpg" alt="">
<img id="src07" src="http://runettex.clan.su/FPC/WP07.jpg" alt="">
<img id="src08" src="http://runettex.clan.su/FPC/WP08.jpg" alt="">
<img id="src09" src="http://runettex.clan.su/FPC/WP09.jpg" alt="">
</span></a></div></div>
CSS данного примера .
#gallery {position: relative; overflow: hidden; width: 360px; height: 525px;}
#pictures {position: relative; top: 280px; left: 0px;}
#pictures img {position: absolute; top: 0; left: 0; width: 340px; border: 0px; margin: 0px 10px;}
Реальный пример . Переключение изображений по клику на изображениях .
скачать архив Javascript
Описание значений скрипта поворота изображения .
$(document).ready(function(){$('#src02').rotate(-1.7);}); - индентификатор изображения на которое будет воздействовать значение строки скрипта
$(document).ready(function(){$('#src02').rotate(-1.7);}); - минус перед значением 1.7 - поворот против часовой стрелки , отсутствие символа , поворот по часовой стрелки
$(document).ready(function(){$('#src02').rotate(-1.7);}); - 1.7 угол поворота изображения в градусах
Описание значений CSS .
width: 340px; - значение ширины изображений
margin: 0px 10px; - значение отступа изображений от сторон контейнера
width: 360px; - значение ширины контейнера изображений = ширина изображений + отступ от сторон контейнера
height: 525px; - значение высоты контейнера изображений , подобрать в зависимости от высоты изображений около двойного значения высоты
top: 280px; - отступ изображений от верха контейнера , чуть больше значения высоты изображений

Non-Commercial Use: Free Runettex_team_ESQ © 2009 - 2024 Хостинг от uCoz