Полезное в сети
Всегда в теме
Статистика
Свежий софт
| Wrecker |  |
| Kaspersky Internet Security 2015 | |
| Wrecker |  |
| Virtual DJ | |
| Wrecker |  |
| SoundForge 11 | |
| Wrecker |  |
| Alcohol 120 | |
| Wrecker |  |
| Norton Internet Security 2014 | |
| Iron |  |
| Loaris Trojan Remover | |
Рекомендуем
Главная » 2013 Апрель 14 » Вращающиеся изображения Слайд-шоу на CSS3 и JQuery
23:21 Вращающиеся изображения Слайд-шоу на CSS3 и JQuery |
Вращающиеся изображения Слайд-шоу на CSS3 и JQuery
Сегодня мы собираемся использовать JQuery и CSS3 повороты,
наряду с JQuery плагином вращения, чтобы
создать красивое слайд-шоу. Вы можете использовать его, чтобы оживить ваши
веб-сайты, страницы продуктов и другие проекты. СМОТРЕТЬ ДЕМО СКАЧАТЬ ИСХОДНИК HTML Следуя традиции, мы начнем с создания HTML разметки
слайд-шоу. Основным элементом контейнера будет элемент DIV. index.html <!DOCTYPE html>
<html> <head> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8" /> <title>Rotating Slideshow With jQuery and
CSS3 | Tutorialzine Demo</title>
<link rel="stylesheet"
type="text/css" href="css/styles.css" />
</head> <body>
<div id="slideShowContainer">
<div id="slideShow">
<ul>
<li><img src="img/photos/1.jpg"
width="100%" alt="Fish" /></li>
<li><img src="img/photos/2.jpg"
width="100%" alt="Ancient" /></li>
<li><img src="img/photos/3.jpg"
width="100%" alt="Industry" /></li>
<li><img src="img/photos/4.jpg"
width="100%" alt="Rain" /></li>
</ul>
</div>
<a
id="previousLink" href="#">»</a> <a
id="nextLink" href="#">«</a>
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script
src="js/jquery.rotate.js"></script> <script
src="js/script.js"></script>
</body> </html>
Слайды определяются как элементы LI внутри неупорядоченного
списка. Обратите внимание, что ширина изображения установлен на 100%. В нижней части, мы включаем JQuery библиотеки, наши
собственные script.js файл, и плагин JQuery поворот. Мы используем плагин,
поэтому мы можем работать с CSS3 вращением в кросс-браузерной моде, как вы увидите на
последнем шаге этого урока.  CSS styles.css #slideShowContainer{ width:510px; height:510px; position:relative; margin:120px
auto 50px; }
#slideShow{ position:absolute; height:490px; width:490px; background-color:#fff; margin:10px
0 0 10px; z-index:100;
-moz-box-shadow:0
0 10px #111; -webkit-box-shadow:0
0 10px #111; box-shadow:0
0 10px #111; }
#slideShow ul{ position:absolute; top:15px; right:15px; bottom:15px; left:15px; list-style:none; overflow:hidden; }
#slideShow li{ position:absolute; top:0; left:0; width:100%; height:100%; }
#slideShowContainer > a{ border:none; text-decoration:none; text-indent:-99999px; overflow:hidden; width:36px; height:37px; background:url('../img/arrows.png')
no-repeat; position:absolute; top:50%; margin-top:-21px; }
#previousLink{ left:-38px; }
#previousLink:hover{ background-position:bottom
left; }
a#nextLink{ right:-38px; background-position:top
right; }
#nextLink:hover{ background-position:bottom
right; }
Несмотря на то, что мы определили ширину 490px , ее полный размер на самом деле510px .
Эта разница в 20px внизу изображения (так как они привязаны к ширине Слайда, которые восстанавливаются от их
нормального размера 480px до 460px. Как вы увидите в следующем шаге мы
используем JQuery анимацию, чтобы увеличить изображение до полного размера.
Таким образом, даже при полном увеличении, изображение в действительности обычного
размера, и нет потери качества.  JQuery Хотя большинство современных браузеров поддерживает CSS3
вращения, это все еще довольно много работы со свойствами конкретного
производителя. К счастью, есть плагины которые занимаются этим вместо нас. Я
выбрал плагин JQuery поворот, так как он также прекрасно интегрируется с анимацией
и CSS , это означает, что мы можем легко
анимировать вращение элементов script.js - Часть 1 $(document).ready(function(){
var
slideShow = $('#slideShow'), ul
= slideShow.find('ul'), li
= ul.find('li'), cnt
= li.length;
//
As the images are positioned absolutely, the last image will be shown on top. //
This is why we force them in the correct order by assigning z-indexes:
updateZindex();
if($.support.transform){
//
Modern browsers with support for css3 transformations
li.find('img').css('rotate',function(i){ //
Rotating the images counter-clockwise return
(-90*i) + 'deg'; });
//
Binding a custom event. the direction and degrees parameters //
are passed when the event is triggered later on in the code.
slideShow.bind('rotateContainer',function(e,direction,degrees){
//
Zooming in the slideshow:
slideShow.animate({ width : 510, height : 510, marginTop : 0, marginLeft : 0 },'fast',function(){
if(direction
== 'next'){
//
Moving the topmost image containing Li at //
the bottom after a fadeOut animation
$('li:first').fadeOut('slow',function(){ $(this).remove().appendTo(ul).show(); updateZindex(); }); } else {
//
Showing the bottommost Li element on top //
with a fade in animation. Notice that we are //
updating the z-indexes.
var
liLast = $('li:last').hide().remove().prependTo(ul); updateZindex(); liLast.fadeIn('slow'); }
//
Rotating the slideShow. css('rotate') gives us the //
current rotation in radians. We are converting it to //
degrees so we can add +90 or -90.
slideShow.animate({ rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees)
+ 'deg' },'slow').animate({ width : 490, height : 490, marginTop : 10, marginLeft : 10 },'fast'); }); });
//
By triggering the custom events below, we can //
show the previous / next images in the slideshow.
slideShow.bind('showNext',function(){ slideShow.trigger('rotateContainer',['next',90]); });
slideShow.bind('showPrevious',function(){ slideShow.trigger('rotateContainer',['previous',-90]); }); } В коде выше, вы можете видеть, что мы связали количество
пользовательских событий.showNext и showPrevious, которые мы используем для управления слайд-шоу. Это, в
свою очередь, выполнит событие
rotateContainer, и передаст направление
и степень качества параметров (вы можете
объединить их в один параметр, но я считаю его более четким, в таком варианте).  script.js - Часть 2 else{ //
Fallback for Internet Explorer and older browsers
slideShow.bind('showNext',function(){ $('li:first').fadeOut('slow',function(){ $(this).remove().appendTo(ul).show(); updateZindex(); }); });
slideShow.bind('showPrevious',function(){ var
liLast = $('li:last').hide().remove().prependTo(ul); updateZindex(); liLast.fadeIn('slow'); }); }
//
Listening for clicks on the arrows, and //
triggering the appropriate event.
$('#previousLink').click(function(){ if(slideShow.is(':animated')){ return
false; }
slideShow.trigger('showPrevious'); return
false; });
$('#nextLink').click(function(){ if(slideShow.is(':animated')){ return
false; }
slideShow.trigger('showNext'); return
false; });
//
This function updates the z-index properties. function
updateZindex(){
//
The CSS method can take a function as its second argument. //
i is the zero-based index of the element.
ul.find('li').css('z-index',function(i){ return
cnt-i; }); }
}); Во второй части кода, вы можете увидеть фрагмент, который
выполняется только в браузерах, которые не поддерживают CSS3 преобразований.
Обратите внимание, что в этом случае мы также определим тот же showNext и
showPrevious событие, но здесь они просто исчезают в или из изображения, не
запуская вращения. UpdateZindex функция также
важна, так как в противном случае слайды будут показаны в обратном порядке. Эта
функция перебирает элементы в том порядке, в котором они находятся настоящее
время, и поэтому они отобразятся корректно. Все наше слайд-шоу готово! СМОТРЕТЬ ДЕМО СКАЧАТЬ ИСХОДНИК |
|
|
| Всего комментариев: 0 | |
