Пятница, 29.03.2024, 12:19

Профиль
ИнформацияВаш профиль
Имя: Гость

Группа: Гости(Noobs)
Ваш браузер- версия-
На сайте живете:- Дней.
Ваша группа:Гости(Noobs)
Наш сайт зовется:Portal SA-MP.Моды для GTA SA,GTA IV,CSS,SCRIPTS UCOZ
Ваша днюха:
Сегодня: 29, 29.03.2024, 12:19
У вас новых личных сообщений · Мой профиль ? Выйти! 


  • Страница 1 из 1
  • 1
Модератор форума: vovik  
SA-MP portal forum,ucoz,gta » Скрипты для UCOZ » Другие скрипты для uCoz » Отличный (супер) слайдер в стиле Apple
Отличный (супер) слайдер в стиле Apple
vovikДата: Четверг, 10.06.2010, 15:24 | Сообщение # 1
Это:vovik
Сообщений на форуме:713
Награды:22  +
Репутация:  ±
Замечания:  ±
Город:Лукоянов
ICQ:367595629
Статус:

Когда речь заходит о дизайне нельзя не вспомнить такую каомпанию как Apple. Так вот речь пойдет как раз о очень симпотичном слайдере , примерно такой же установлен на сайте Apple. С некоторыми лишь отличиями ,например мы не будем использовать базу данных и php.

Шаг 1 – XHTML

Давайте посмотрим на XHTML разметку:

Code
<div id="main">  
<div id="gallery">  
<div id="slides">  
<div><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div>  
<div><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div>  
<div><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div>  
</div>  
<div id="menu">  
<ul>  
<li> </li><li><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li><li><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li><li><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li>  
</ul>  
</div>  
</div>  
</div>

Идея проста 2 контейнера DIV - один с id=”menu” содержит миниатюры, второй с id=“slides” содержит слайды.

Для добавления нового слайда понадобится всего лишь просто добавить новые элементы в оба контейнера. Слайды - картинки в формате JPG, миниатюры - прозрачные PNG. Но можете использовать и любые другие другие форматы.

Также можете вставлять любой HTML код. К примеру, Вы можете сделать определенный слайд ссылкой в виде картинке. Крайний правый слайд в нашей демо так и сделан, так что для вас не составит особого труда это сделать.

Важно, прописать у слайдов высоту и ширину - они используется jQuery для определения зоны прокрутки.

Шаг 2 – CSS

Code
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{  
/* Page reset */  
margin:0px;  
padding:0px;  
}  

body{  
/* Setting default text color, background and a font stack */  
color:#444444;  
font-size:13px;  
background: #f2f2f2;  
font-family:Arial, Helvetica, sans-serif;  
}  

/* Gallery styles */  

#gallery{  
/* CSS3 Box Shadow */  
-moz-box-shadow:0 0 3px #AAAAAA;  
-webkit-box-shadow:0 0 3px #AAAAAA;  
box-shadow:0 0 3px #AAAAAA;  

/* CSS3 Rounded Corners */  

-moz-border-radius-bottomleft:4px;  
-webkit-border-bottom-left-radius:4px;  
border-bottom-left-radius:4px;  

-moz-border-radius-bottomright:4px;  
-webkit-border-bottom-right-radius:4px;  
border-bottom-right-radius:4px;  

border:1px solid white;  

background:url(img/panel.jpg) repeat-x bottom center #ffffff;  

/* The width of the gallery */  
width:920px;  
overflow:hidden;  
}  

#slides{  
/* This is the slide area */  
height:400px;  

/* jQuery changes the width later on to the sum of the widths of all the slides. */  
width:920px;  
overflow:hidden;  
}  

.slide{  
float:left;  
}  

#menu{  
/* This is the container for the thumbnails */  
height:45px;  
}  

ul{  
margin:0px;  
padding:0px;  
}  

li{  
/* Every thumbnail is a li element */  
width:60px;  
display:inline-block;  
list-style:none;  
height:45px;  
overflow:hidden;  
}  

li.inact:hover{  
/* The inactive state, highlighted on mouse over */  
background:url(img/pic_bg.png) repeat;  
}  

li.act,li.act:hover{  
/* The active state of the thumb */  
background:url(img/active_bg.png) no-repeat;  
}  

li.act a{  
cursor:default;  
}  

.fbar{  
/* The left-most vertical bar, next to the first thumbnail */  
width:2px;  
background:url(img/divider.png) no-repeat right;  
}  

li a{  
display:block;  
background:url(img/divider.png) no-repeat right;  
height:35px;  
padding-top:10px;  
}  

a img{  
border:none;  
}  

/* The styles below are only necessary for the demo page */  

h1{  
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;  
font-size:36px;  
font-weight:normal;  
margin-bottom:15px;  
}  

h2{  
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;  
font-size:12px;  
font-weight:normal;  
position:absolute;  
right:0;  
text-transform:uppercase;  
top:15px;  
}  

#main{  
/* The main container */  
margin:15px auto;  
text-align:center;  
width:920px;  
position:relative;  
}  

a, a:visited {  
color:#0196e3;  
text-decoration:none;  
outline:none;  
}  

a:hover{  
text-decoration:underline;  
}  

p{  
padding:10px;  
text-align:center;  
}

В этой таблице стилей мы использовали несколько CSS3 sсвойств:

* box-shadow, по углам галереи небольшая тень. Использование этого свойства - необходимо предоставить координаты X и Y (0 0 here), размывание (3px в нашем примере) и цвет тени;
* border-radius, круглые границы снизу галереи.

К сожалению, эти свойства работают не во всех браузерах.

Шаг 3 – jQuery

Code
$(document).ready(function(){  
/* This code is executed after the DOM has been completely loaded */  

var totWidth=0;  
var positions = new Array();  

$('#slides .slide').each(function(i){  
/* Loop through all the slides and store their accumulative widths in totWidth */  
positions[i]= totWidth;  

totWidth += $(this).width();  

/* The positions array contains each slide's commulutative offset from the left part of the container */  

if(!$(this).width())  
{  

alert("Please, fill in width & height for all your images!");  
return false;  
}  
});  

$('#slides').width(totWidth);  

/* Change the cotnainer div's width to the exact width of all the slides combined */  

$('#menu ul li a').click(function(e){  

/* On a thumbnail click */  

$('li.menuItem').removeClass('act').addClass('inact');  
$(this).parent().addClass('act');  

var pos = $(this).parent().prevAll('.menuItem').length;  

$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);  
/* Start the sliding animation */  

e.preventDefault();  
/* Prevent the default action of the link */  

});  

$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');  
/* On page load, mark the first thumbnail as active */  

});  
    

Главная идея в циклическом повторении слайдов, ширина слайдов суммируется и эта ширина присваевается контейнеру. Поскольку слайды выровнены по левому краю - у них достаточно места комфортно расположиться друг за другом.

Всего 40 строк кода и наша слайдшоу - галерея готова!

Заключение

Всего три шага нам понадобилось для создания красивой галереи в стиле Apple.


PriDE clan super clan xD


СЕССИЯ МОЗГИ ПЛАВЯТСЯ....


SA-MP portal forum,ucoz,gta » Скрипты для UCOZ » Другие скрипты для uCoz » Отличный (супер) слайдер в стиле Apple
  • Страница 1 из 1
  • 1
Поиск:
Последние ответы форума
Тема Дата, Время АвторРаздел
Новый Мини чат 19.06.2011, 08:42 Rakurs Другие скрипты для uCoz
Читать
Радио на сайт 19.06.2011, 08:41 Rakurs Другие скрипты для uCoz
Читать
Мини профиль для ucoz 19.06.2011, 08:41 Rakurs Другие скрипты для uCoz
Читать
Мини-профиль + форма входа 19.06.2011, 08:41 Rakurs Другие скрипты для uCoz
Читать
Обновлёный блок софта для ucoz 19.06.2011, 08:40 Rakurs Другие скрипты для uCoz
Читать
Баннеро обмен с нашим сайтом 12.06.2011, 23:49 Gudwin Предложения по сайту
Читать
aeyvetara 08.06.2011, 00:19 aeyvetara Музыка
Читать
Wankasta 09.05.2011, 13:33 Wankasta Музыка
Читать
Я ГОНЩИК 07.05.2011, 13:02 Salomon Геймеры [sa-mp]
Читать
Дешёвый хостинг sa-mp серверов 333host.ru 28.04.2011, 22:30 hosting Хостинг серверов sa-mp цены инструкции
Читать



Robinson_R22 (0)


Загрузок-884

РЕЗАК (0)


Загрузок-882

Toyota Supra Black tuning для GTA 4 (0)


Загрузок-913

Alfa_romeo_Compet (0)


Загрузок-765

4 дверная тайота (0)


Загрузок-1057

Aston Martin (0)


Загрузок-562

TOZ-34 (0)


Загрузок-728


www.pride-samp.ucoz.ru | Все для SA-MP: filterscripts, gamemodes,scripts, programs...