Пак CSS & JQ рецептов
Так как идей для скриптов нет, я решил побаловаться с CSS и jQuery и сделал для вас небольшой пак разработок. В паке 4 "рецепта" на CSS и jQuery, а именно:
Все разработки полностью и легко редактируются, область применения их ограничивается лишь вашей фантазией.
Если вы хотите, чтобы мы выкладывали подобные паки еженедельно, напишите свое мнение об этом в комментариях.
- CSS3-Меню - черное выпадающее меню с красивыми эффектами анимации. [ демо ]
- JQ-хинт - стилизованная альтернатива работе атрибута title и alt, т.е. при наведении на объект с атрибутом "hint" появляется стилизованная всплывающая подсказка вместо обычной. [ демо ]
- JQ-подсказка - при наведении на любой объект, содержащий атрибут help-descr, в определенном блоке появляется содержимое этого атрибута. Создав несколько объектов с атрибутом help-descr, можно получить блок информации. [ демо ]
- JQ-галерея - при клике по картинке, она плавно меняется на другую.[ демо ]
Все разработки полностью и легко редактируются, область применения их ограничивается лишь вашей фантазией.
Если вы хотите, чтобы мы выкладывали подобные паки еженедельно, напишите свое мнение об этом в комментариях.
Инструкции по установке смотрим ниже.
1) В CSS вставляем стили:
2) В место, где будет меню, вставляем:
Установка завершена. Ссылки вы можете изменять по своему желанию.
1) В низ сайта вставляем код:
2) В CSS вставляем:
3) Добавляем к нужному элементу атрибут hint. Например:
a href="/" title="Описание для поисковиков" hint="Описание для людей" web41k.ru/a
В хинт также можно добавить HTML-теги.
Установка завершена.
1) В низ сайта вставляем код:
2) В нужное место добавляем блок с подсказкой:
В нужные элементы добавляем атрибут help-descr. Пример:
a href="/" help-descr="Описание, которое появится в блоке при наведении на элемент" web41k.ru/a
В атрибут также можно добавить HTML-теги.
Установка завершена.
1) В низ сайта вставляем код:
2) В место, где будет галерея, вставляем:
В каждое новое изображение добавьте атрибут number с числовым значением по порядку.
И в скрипте (1 шаг) замените число в переменной на кол-во картинок+1 (На 1 больше, чем кол-во картинок)
Установка завершена.
Если вы хотите, чтобы мы выкладывали подобные паки еженедельно, напишите свое мнение об этом в комментариях.
CSS3-Меню
1) В CSS вставляем стили:
Code
/* === CSS3-меню by web41k.ru ==== */
.myMenu span {position:relative;}
.myMenu *, .myVipadMenu {transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;}
.myMenu a {font-weight:bold; text-shadow:1px 1px 0 #333; display:block; margin-bottom:-1px; border:1px solid #181818; background: -webkit-linear-gradient(bottom, #1F2126 0%, #23262B 100%); background: -moz-linear-gradient(bottom, #1F2126 0%, #23262B 100%); background: -o-linear-gradient(bottom, #1F2126 0%, #23262B 100%); background: -ms-linear-gradient(bottom, #1F2126 0%, #23262B 100%); background: -linear-gradient(bottom, #1F2126 0%, #23262B 100%); padding:5px;}
.myMenu a {text-decoration:none; font-family: Tahoma; font-size:12px; font-weight:bold; color:#bbb;}
.myMenu a:hover {color:#ddd; padding-left:15px;}
.myMenu a:hover + a {padding-left:10px;}
.myVipadMenu a:hover + a {padding-left:20px;}
.myVipad {position:relative;}
.myVipad:after {content:'>';padding-left:5px; border-left:1px solid #181818; color:#efefef; height:24px; width:auto; font-size:13pt; font-family:cursive; position:absolute; top:0; right:5px;}
.myVipadMenu {opacity:0; filter: alpha(opacity=0); position:absolute; left: 199px; top: -25px; width:200px;}
.myVipad:hover + .myVipadMenu, .myVipadMenu:hover {opacity:1; filter: alpha(opacity=100);}
.myVipadMenu a {padding-left:15px; color:#ddd;}
.myVipadMenu a:hover {padding-left:25px;}
/* === CSS3-меню by web41k.ru ==== */
.myMenu span {position:relative;}
.myMenu *, .myVipadMenu {transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;}
.myMenu a {font-weight:bold; text-shadow:1px 1px 0 #333; display:block; margin-bottom:-1px; border:1px solid #181818; background: -webkit-linear-gradient(bottom, #1F2126 0%, #23262B 100%); background: -moz-linear-gradient(bottom, #1F2126 0%, #23262B 100%); background: -o-linear-gradient(bottom, #1F2126 0%, #23262B 100%); background: -ms-linear-gradient(bottom, #1F2126 0%, #23262B 100%); background: -linear-gradient(bottom, #1F2126 0%, #23262B 100%); padding:5px;}
.myMenu a {text-decoration:none; font-family: Tahoma; font-size:12px; font-weight:bold; color:#bbb;}
.myMenu a:hover {color:#ddd; padding-left:15px;}
.myMenu a:hover + a {padding-left:10px;}
.myVipadMenu a:hover + a {padding-left:20px;}
.myVipad {position:relative;}
.myVipad:after {content:'>';padding-left:5px; border-left:1px solid #181818; color:#efefef; height:24px; width:auto; font-size:13pt; font-family:cursive; position:absolute; top:0; right:5px;}
.myVipadMenu {opacity:0; filter: alpha(opacity=0); position:absolute; left: 199px; top: -25px; width:200px;}
.myVipad:hover + .myVipadMenu, .myVipadMenu:hover {opacity:1; filter: alpha(opacity=100);}
.myVipadMenu a {padding-left:15px; color:#ddd;}
.myVipadMenu a:hover {padding-left:25px;}
/* === CSS3-меню by web41k.ru ==== */
2) В место, где будет меню, вставляем:
Code
<div class="myMenu">
<span><a href="/">Главная</a></span>
<span><a href="/forum">Форум</a></span>
<span><a href="/load">Файлы</a></span>
<span><a class="myVipad" href="/">Демо</a>
<div class="myVipadMenu">
<a href="/">by Kelin</a>
<a href="/">Web41k.ru</a>
</div></span>
</div>
<span><a href="/">Главная</a></span>
<span><a href="/forum">Форум</a></span>
<span><a href="/load">Файлы</a></span>
<span><a class="myVipad" href="/">Демо</a>
<div class="myVipadMenu">
<a href="/">by Kelin</a>
<a href="/">Web41k.ru</a>
</div></span>
</div>
Установка завершена. Ссылки вы можете изменять по своему желанию.
JQ-хинт
1) В низ сайта вставляем код:
Code
<script type="text/javascript">
$(function(h){$('body').mousemove(function(h){$(this).find('[hint]').hover(function(){var title = $(this).attr('title'); $(this).attr('title',''); $(this).append('<div class="hint">'+$(this).attr('hint')+'</div>');}); $('[hint], .hint').mouseout(function(){$('.hint').remove();}); $('.hint').css({'top':+h.pageY+10,'left':+h.pageX+10});});});
</script>
$(function(h){$('body').mousemove(function(h){$(this).find('[hint]').hover(function(){var title = $(this).attr('title'); $(this).attr('title',''); $(this).append('<div class="hint">'+$(this).attr('hint')+'</div>');}); $('[hint], .hint').mouseout(function(){$('.hint').remove();}); $('.hint').css({'top':+h.pageY+10,'left':+h.pageX+10});});});
</script>
2) В CSS вставляем:
Code
/* === CSS3-хинт by web41k.ru ==== */
.hint {color: #777; position:absolute; opacity:0.5; padding:5px; background:#e8e8e8; border:2px dotted #aaa; max-width:500px;}
.hint img {vertical-align:middle;}
/* === CSS3-хинт by web41k.ru ==== */
.hint {color: #777; position:absolute; opacity:0.5; padding:5px; background:#e8e8e8; border:2px dotted #aaa; max-width:500px;}
.hint img {vertical-align:middle;}
/* === CSS3-хинт by web41k.ru ==== */
3) Добавляем к нужному элементу атрибут hint. Например:
Quote
В хинт также можно добавить HTML-теги.
Установка завершена.
JQ-подсказка
1) В низ сайта вставляем код:
Code
<script type="text/javascript">
$('[help-descr]').mouseover(function(){
$('.help-descr').html($(this).attr('help-descr'));
})
$('[help-descr]').mouseout(function(){
$('.help-descr').html('');
})
</script>
$('[help-descr]').mouseover(function(){
$('.help-descr').html($(this).attr('help-descr'));
})
$('[help-descr]').mouseout(function(){
$('.help-descr').html('');
})
</script>
2) В нужное место добавляем блок с подсказкой:
Code
<span class="help-descr"></span>
В нужные элементы добавляем атрибут help-descr. Пример:
Quote
В атрибут также можно добавить HTML-теги.
Установка завершена.
JQ-галерея
1) В низ сайта вставляем код:
Code
<script type="text/javascript">
$('#blockImges #Imaga').click(function(){
var number = $(this).attr('number');
var number = +number + 1;
var numberAll = 5;
$(this).animate({position:"static"},1).animate({opacity: "0", zIndex:"0"},1000);
if (numberAll <= number)
{$(this).parent().find('[number="1"]').animate({position:"static"},1).animate({opacity: "1", zIndex:"1000"},1000);}
else {$(this).parent().find('[number="'+number+'"]').animate({position:"static"},1).animate({opacity: "1", zIndex:"1000"},1000);}
})
</script>
$('#blockImges #Imaga').click(function(){
var number = $(this).attr('number');
var number = +number + 1;
var numberAll = 5;
$(this).animate({position:"static"},1).animate({opacity: "0", zIndex:"0"},1000);
if (numberAll <= number)
{$(this).parent().find('[number="1"]').animate({position:"static"},1).animate({opacity: "1", zIndex:"1000"},1000);}
else {$(this).parent().find('[number="'+number+'"]').animate({position:"static"},1).animate({opacity: "1", zIndex:"1000"},1000);}
})
</script>
2) В место, где будет галерея, вставляем:
Code
<div id="blockImges" style="position:relative;">
<img src="ССЫЛКА" number="1" id="Imaga" style="z-index:1000; position:absolute; top:0; left:0; opacity:1;">
<img src="ССЫЛКА" number="2" id="Imaga" style="position:absolute; top:0; left:0; opacity:0;">
<img src="ССЫЛКА" number="3" id="Imaga" style="position:absolute; top:0; left:0; opacity:0;">
<img src="ССЫЛКА" number="4" id="Imaga" style="position:absolute; top:0; left:0; opacity:0;">
</div>
<img src="ССЫЛКА" number="1" id="Imaga" style="z-index:1000; position:absolute; top:0; left:0; opacity:1;">
<img src="ССЫЛКА" number="2" id="Imaga" style="position:absolute; top:0; left:0; opacity:0;">
<img src="ССЫЛКА" number="3" id="Imaga" style="position:absolute; top:0; left:0; opacity:0;">
<img src="ССЫЛКА" number="4" id="Imaga" style="position:absolute; top:0; left:0; opacity:0;">
</div>
В каждое новое изображение добавьте атрибут number с числовым значением по порядку.
И в скрипте (1 шаг) замените число в переменной на кол-во картинок+1 (На 1 больше, чем кол-во картинок)
Quote
var numberAll = 5
Установка завершена.
Если вы хотите, чтобы мы выкладывали подобные паки еженедельно, напишите свое мнение об этом в комментариях.
Мне нравится 7
Просмотры: 2027 · Комментарии: 12 · Добавил: Kelin · Категория: Рецепты HTML и CSS
Это гораздо лучше готового скрипта, потому что из этого можно сделать все, что угодно. Нужно лишь включить фантазию
Нет фантазии, куда это все применить - так и скажи. Зачем обсирать все сразу?
остальное не очень