Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
логин:
пароль:

Регистрация Забыл пароль
Скрипты для uCoz Шаблоны для uCoz
Для того что бы оставлять сообщения на форуме вам необходимо зарегистрироваться или войти под своим профилем.

Carousel - Форум


  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: Fro0st, lewonchik  
Форум » Веб мастеру » Интересные решения в uCoz » Carousel
Carousel
FrоstДата написания: Вторник, 07.09.2010, 17:04:05 | Сообщение № 1

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469

Решил преподнести вам небольшой скрипт. Эдакая карусель-меню. Сделал ее на скорую руку. Можете говорить, что код большой, сделан не грамотно, много багов и т. д. Все это я и сам прекрасно знаю. Главное работает, а остальное неважно... :)
Займемся установкой.
1. Подключение jQuery
Как всегда сначала подключаем jQuery с помощью вот этой гениальной строчки:

Code
<script type="text/javascript" src="jquery-1.4.2.js"></script>

2. CSS
Затем прописываем либо в отдельный файл, либо между тегами на странице:

Code
body{margin:0}
.car img{cursor:pointer}
.car{list-style:none;margin-left:100px;padding:0}
.car li{position:absolute;height:130px;width:100px;}
.back{margin:0 0 0 15px;opacity:.3;z-index:1}
.left{margin:20px 0 0 -100px;opacity:.6;z-index:2}
.right{margin:20px 0 0 120px;opacity:.6;z-index:3}
.front{margin:40px 0 0 10px;z-index:4}
.back img{height:78px;width:60px;}
.left img{height:104px;width:80px;}
.right img{height:104px;width:80px;}
.front img{height:130px;width:100px;}
.links{position:absolute;z-index:5;margin:180px 0 0 125px}
.links a{text-decoration:none;color:#AAA; text-shadow:1px 1px 1px #FFF;font-size:20px;font-weight:bold;display:inline-block;border:1px solid #AAA;width:30px;height:30px;line-height:30px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#DDD}

Комментировать каждую строчку я не собираюсь ибо сами поймете

3. HTML
Далее делаем каркас самого меню:

Code
<div align="center">
<ul class="car">
<li class="back" id="1"><img border="0" src="img/1.png"></li>
<li class="left" id="2"><img border="0" src="img/2.png"></li>
<li class="right" id="3"><img border="0" src="img/3.png"></li>
<li class="front" id="4"><img border="0" src="img/4.png"></li>
</ul>
<div class="links">
<a href="javascript://" class="lArr">«</a>
<a href="javascript://" class="rArr">»</a>
</div>
</div>

4. jQery код
И последний шаг - это сам скрипт:

Code
jQuery(function(){
$('.rArr').click(function(){
$('.right').animate({marginLeft:'15px',marginTop:'0',opacity:.3},500).css('z-index','1').f   ind('img').animate({height:'78px',width:'60px'},500,function(){$('#3').addClass('back').removeClass('right')});
$('.back').attr('id', '1');
$('.front').animate({marginLeft:'120px',marginTop:'20px',opacity:.6},500).css('z-index','3').find('img').animate({height:'104px',width:'80   px'},500,function(){$('#4').addClass('right').removeClass('front')});
$('.right').attr('id', '3');
$('.left').animate({marginLeft:'10px',marginTop:'40px',opacity:1},500).css('z-index','4').find('img').animate({height:'130px',width:'100px   '},500,function(){$('#2').addClass('front').removeClass('left')});
$('.front').attr('id', '4');
$('.back').animate({marginLeft:'-100px',marginTop:'20px',opacity:.6},500).css('z-index','2').find('img').animate({height:'104px',width:'80   px'},500,function(){$('#1').addClass('left').removeClass('back')});
$('.left').attr('id', '2');
});
$('.lArr').click(function(){
$('.right').animate({marginLeft:'10px',marginTop:'40px',opacity:1},500).css('z-index','4').find('img').anima   te({height:'130px',width:'100px'},500,function(){$('#3').addClass('front').removeClass('right')})
$('.front').attr('id', '4')
$('.front').animate({marginLeft:'-100px',marginTop:'20px',opacity:.6},500).css('z-index','3').find('img').animate({height:'104px',widt   h:'80px'},500,function(){$('#4').addClass('left').removeClass('front')})
$('.left').attr('id', '2')
$('.left').animate({marginLeft:'15px',marginTop:'0',opacity:.3},500).css('z-index','1').find('img').animate({height:'78px',width:'60px   '},500,function(){$('#2').addClass('back').removeClass('left')})
$('.back').attr('id', '1')
$('.back').animate({marginLeft:'120px',marginTop:'20px',opacity:.6},500).css('z-index','2').find('img').animate({height:'104px',width:   '80px'},500,function(){$('#1').addClass('right').removeClass('back')})
$('.right').attr('id', '3')
});
});

Источник и автор: des.ucoz.net


 
GhoSTДата написания: Вторник, 07.09.2010, 18:01:04 | Сообщение № 2

Сообщений: 761
Награды: 173
Репутация: 2
Fro0st, ^_^ супер мне понравилось) молодец !


 
FrоstДата написания: Вторник, 07.09.2010, 18:50:46 | Сообщение № 3

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Все спасибы, суперы, классы если можно в репутацию. Мне будет вдвойне приятно ^_^

 
D1nGoДата написания: Вторник, 07.09.2010, 19:00:29 | Сообщение № 4

-= Уровень: 0 =-
Сообщений: 979
Награды: 160
Репутация: -8747
Quote (Fro0st)
Все спасибы, суперы, классы если можно в репутацию. Мне будет вдвойне приятно

Ок) :)
Прикольная вещь карусель ) Мне понравилось angel


[text]Не нажимай![/text]
 
DizeLДата написания: Вторник, 07.09.2010, 20:25:47 | Сообщение № 5


Раскрутка сайта
Сообщений: 1695
Награды: 230
Репутация: 156
И какой же толк от нее?
 
D1nGoДата написания: Вторник, 07.09.2010, 20:36:38 | Сообщение № 6

-= Уровень: 0 =-
Сообщений: 979
Награды: 160
Репутация: -8747
DizeL, Толка нет если честно) Но зато прикольно :) tongue

[text]Не нажимай![/text]
 
GhoSTДата написания: Вторник, 07.09.2010, 20:49:33 | Сообщение № 7

Сообщений: 761
Награды: 173
Репутация: 2
DizeL, ну например слайдер изображений под шапкой сайта)


 
FrоstДата написания: Вторник, 07.09.2010, 22:32:05 | Сообщение № 8

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
В скрипте смысла никакого. Зато выглядит красиво : )
Задумывалось как меню... Если доработать, убрать баги, то будет неплохо


 
D1nGoДата написания: Вторник, 07.09.2010, 23:29:01 | Сообщение № 9

-= Уровень: 0 =-
Сообщений: 979
Награды: 160
Репутация: -8747
Quote (Fro0st)
Зато выглядит красиво : )

Да согласен , доработай скрипт , а то мне делать нечего было сегодня , где-то минут 20-30 игрался в эту фигнюшку :)


[text]Не нажимай![/text]
 
dima60216Дата написания: Среда, 08.09.2010, 18:22:57 | Сообщение № 10

-= Уровень: 4 =-
Сообщений: 143
Награды: 5
Репутация: 43
Fro0st, баг: если быстро щелкать по стрелочке, то круглеши начинают склеиваться

Купи ссылку с сайта (200 хостов в день) всего за 5 рублей! Сроки не ограничены! Сайт на компьютерную тематику.
 
FrоstДата написания: Четверг, 09.09.2010, 10:35:29 | Сообщение № 11

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Quote (dima60216)
круглеши
xDD
Уже видел. Я это все исправлю во второй версии этого плагина


 
kshlkvVIPДата написания: Вторник, 14.09.2010, 15:50:22 | Сообщение № 12


Создание игр и программ
Сообщений: 836
Награды: 4
Репутация: 325
Я себепоставил, а он не пашет :(

[text]MicroBar's[/text][text]





[/text]
[text]UserBar's[/text][text]
 
SperetДата написания: Вторник, 14.09.2010, 16:26:52 | Сообщение № 13

Проверенный
Сообщений: 501
Награды: 32
Репутация: 149
kshlkv, значит криво поставил.
А вот с этим скриптом можно по работать, сделать его как слайд новостей через информер.


[text]

[text][/text][/text]

 
lewonchikДата написания: Вторник, 14.09.2010, 16:40:47 | Сообщение № 14

-= Уровень: 1 =-
Сообщений: 31
Награды: 11
Репутация: 79
kshlkv, возможно проблема связана с jQuery - на юкозе библиотека jQuery подключена изначально и при подключении скрипта jQuery-1.4.2 из архива происходит конфликт библиотек. Попробуй отключить этот скрипт
Code
<script type="text/javascript" src="jquery-1.4.2.js"></script>
просто удали эту строчку и потом проверь. Должно работать без неё.


WebStory

 
kshlkvVIPДата написания: Вторник, 14.09.2010, 18:08:52 | Сообщение № 15


Создание игр и программ
Сообщений: 836
Награды: 4
Репутация: 325
http://u-master.tk/ Не реклама (рекламировать нечего :) )

Посмотрите вот как получилось. Можете помочь???
Я все скачал.
залил jquery-1.4.2.js и папку.

4. jQery код Его куда ставить??? Я пробовал туда куда меню надо и в CSS


[text]MicroBar's[/text][text]





[/text]
[text]UserBar's[/text][text]
 
FrоstДата написания: Вторник, 14.09.2010, 18:43:31 | Сообщение № 16

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Статью я писал не для юкозовцев и будучи не слишком трезвым. whistling
На юкозе данная сточка не нужна:
Code
<script type="text/javascript" src="jquery-1.4.2.js"></script>

Т. к. на юкозе изначально установлен jQuery.
Quote (lewonchik)
происходит конфликт библиотек

Немного не так. Конфликта не происходит. Функции и той, и той библиотеки совмещаются, а если в обеих библиотеках одна и та же функция выполняется по-разному, то используется та библиотека, которая прописана ниже. Надеюсь поняли ^_^

kshlkv, просто нужно скрипт писать между тегами <script> и </script> и скрипт в css не надо прописывать pinch


 
kshlkvVIPДата написания: Вторник, 14.09.2010, 18:53:19 | Сообщение № 17


Создание игр и программ
Сообщений: 836
Награды: 4
Репутация: 325
Я скопировал все из демо(код страницы) и теперь пашет, но вопрос. Как сделать ссылки на эти кружки.

[text]MicroBar's[/text][text]





[/text]
[text]UserBar's[/text][text]
 
lewonchikДата написания: Вторник, 14.09.2010, 19:23:36 | Сообщение № 18

-= Уровень: 1 =-
Сообщений: 31
Награды: 11
Репутация: 79
Fro0st,
Quote (lewonchik)
возможно проблема связана с jQuery


WebStory

 
FrоstДата написания: Вторник, 14.09.2010, 19:37:21 | Сообщение № 19

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Ууууууу как все запущенно... Вот тебе ссылка

 
kshlkvVIPДата написания: Среда, 15.09.2010, 11:53:37 | Сообщение № 20


Создание игр и программ
Сообщений: 836
Награды: 4
Репутация: 325
А-а-а это я знаю насчет ссылки. я не уверен был куда ставить. Я уже сделал. :)
Сейчас ищу книку по html Хочу скрипты научится писать.
Fro0st, ты мне кажется дал сайт где есть это :) Кстати лови + за меню.

Добавлено (15.09.2010, 11:53:37)
---------------------------------------------
Все я поставил. спасибо. хорошо кстати смотрится вроде. Потом подправлю немного и все.
Классная штука.


[text]MicroBar's[/text][text]





[/text]
[text]UserBar's[/text][text]
 
Форум » Веб мастеру » Интересные решения в uCoz » Carousel
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:
Обсуждение темы на форуме веб мастеров 3aKa4Ka.at.ua

© 3aka4ka.at.ua 2008 - 2022г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.