Воскресенье, 05.05.2024, 20:25
Приветствую Вас Гость | RSS
Мой сайт
Главная
Регистрация
Вход
Меню сайта

Категории раздела
Мои файлы [11]

Мини-чат

Наш опрос
Оцените мой сайт
Всего ответов: 0

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Главная » Файлы

Всего материалов в каталоге: 11
Показано материалов: 1-10
Страницы: 1 2 »

Скрипт кнопка вверх как кот


В этом готовом решении для системы uCoz и для любых сайтов вообще, я предлагаю вам новый скрипт кнопка вверх как кот для сайта. Главной особенностью данного скрипта кнопки вверх, является то, что она выглядит как кот, который толкает стрелку (страницу) вверх сайта. Данная кнопка вверх с плавным скроллингом (смотрите также такой скрипт кнопка вверх для сайта), что очень приятно пользователю. Установка, как всегда, очень проста . . .
Установка:
Идем в Панель Управления => Управление дизайном => Нижняя часть сайта и здесь в самый низ ставим такой код:
Код
<script language="JavaScript" type="text/javascript">
$(function() {
  $.fn.scrollToTop = function() {
  $(this).hide().removeAttr("href");
  if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
  var scrollDiv = $(this);
  $(window).scroll(function() {
  if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
  else $(scrollDiv).fadeIn("slow")
  });
  $(this).click(function() {
  $("html, body").animate({scrollTop: 0}, "slow")
  })
  }
});

$(function() {
  $("#Go_Top").scrollToTop();
});
</script>

<a style='position: fixed; bottom: 25px; right: 50px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
  <img src="http://webanfarwol.ru/IMG4/kotjara-vverkh.png" alt="Вверх" title="Вверх страницы сайта">
</a></div>
После этого сохраняем все сделанные изменения нажав на кнопку «сохранить». Готово! Вот такой скрипт кнопочки вверх в виде котика. На этом все, спасибо вам за внимание!

Мои файлы | Просмотров: 417 | Загрузок: 0 | Добавил: milena | Дата: 17.05.2014 | Комментарии (0)

Меню в Японском стиле для сайта на CSS

В этом посте мы установим на наш сайт необычное меню в Японском стиле для сайта на CSS. Меню раздвижное (выдвижное, раздвигающееся) выполнено в японском стиле, установка очень проста . . .
Установка:
Для начала идем в ваши таблицы стилей CSS и вставляем туда такой код:
Код
.content-inner {
background-color: #E2CFAC;
}
.menu-block {
position: relative;
background: #8F0000;
border: 1px solid #666;
padding: 15px 0;
margin: 0 auto;
height: 200px;
width: 100%;
}
.menu-block:after,
.menu-block:before {
position: absolute;
top: 65px;font: normal normal 100px/100px serif;
color: #333;
text-shadow: 1px 1px 10px #E0C2C2;
padding: 0;
margin: 0;
height: 100px;
width: 100px;
}
.menu-block:before {
content: '風';
left: 15%;
}
.menu-block:after {
content: '水';
right: 15%;
}
.fen-shuy {
position: relative;
z-index: 5;
background: url(http://webanfarwol.ru/IMG5/fen-shuy-gradient.png) repeat-x #ccc;
border: 1px solid #000;
border-radius: 100px;
margin: 0 auto;
height: 200px;
width: 200px;
}
.fen-shuy:hover {
width: 800px;
}
.fen-shuy:after,
.fen-shuy:before {
position: absolute;
top: 0;
content: '';
padding: 0;
margin: 0;
height: 200px;
width: 100px;
}
.fen-shuy:before {
left: 0;
background: #000;
border-radius: 100px 0 0 100px;
}
.fen-shuy:after {
right: 0;
background: #fff;
border-radius: 0 100px 100px 0;
}
.fs-menu:before,
.fs-menu:after {
content: '\25CF';
position: absolute;
z-index: 5;
font: normal normal 100px/75px Tahoma;
height: 100px;
width: 50px;
}
.fs-menu:before {
background: #fff;
border-radius: 50px 0 0 50px;
text-indent: 20px;
color: #000;
left: 50px;
top: 0;
}
.fs-menu:after {
background: #000;
border-radius: 0 50px 50px 0;
text-indent: -50px;
color: #fff;
right: 50px;
bottom: 0;
}
.fs-menu {
background: url(http://webanfarwol.ru/IMG5/fen-shuy-bg.png) 0% -2px no-repeat transparent;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
padding: 0 !important;
margin: 0 100px !important;
list-style: none;
overflow: hidden;
height: 196px;
}
.fs-menu li {
position: relative;
border-radius: 100px;
text-align: center;
float: left;
height: 100%;
width: 120px;
}
.fs-menu li a {
display: block;
position: relative;
background: #000000;
border-radius: 120px;
border: 2px solid #ffffff;
color: #ffffff;
font: normal normal 13px/100px Tahoma;
text-decoration: none;
overflow: hidden;
margin: 50px 10px;
height: 100px;
width: 100px;
word-wrap: break-word;
}
.fs-menu li a:hover {
background: #ffffff;
margin: 20px -18px;
font: normal normal 16px/150px Tahoma;
padding: 1px 2px 1px 2px;
color: #000000;
border: 2px solid #000000;
z-index: 2;
height: 150px;
width: 150px;
}
.menu-title {
display: block;
position: absolute;
top: -18px;
right: 100%;
background: #FFF;
border: 1px solid #CCC;
text-align: center;
font: normal normal 16px sans-serif;
opacity: .4;
padding: 10px 0 0 0;
height: 80px;
width: 20px;
word-wrap: break-word;
}
.menu-title:before,
.menu-title:after {
content: '';
position: absolute;
right: 0;
border-radius: 1px;
border-width: 10px 10px;
border-style: solid;
}
.menu-title:after{
top: 90px;
border-color: #FFF transparent transparent transparent;
}
.menu-title:before {
top: 91px;
border-color: #CCC transparent transparent transparent;
}
.fen-shuy:hover .menu-title {
opacity: 0;
}
.close-fs {
display: none;
position: absolute;
top: 10px;
right: 110px;
background: #FFF;
border: 1px solid #666;
border-radius: 2px;
font: normal normal 12px/14px Comic Sans MS;
text-align: center;
color: #666;
cursor:pointer;
height: 14px;
width: 13px;
}
.close-fs:hover {
color:#C00;
}
.fen-shuy:hover .menu-title {
opacity: 0;
}
.fen-shuy {
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
transition: all 1s ease-in;
}
.fs-menu li a,
.menu-title {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}


Теперь туда, где __
Мои файлы | Просмотров: 278 | Загрузок: 0 | Добавил: milena | Дата: 17.05.2014 | Комментарии (0)

Интересный скрипт работает на css. При наведении на ссылку (картинку) появляется картинка. Очень удобно делать к примеру в блок друзья при наведении на ссылку будет виден скриншот сайта но он не обновляется т.е. только та картинка которую поставите.
CSS стиль я немного переделал под себя.
в CSS прописываем :
Code
/*Всплывающий скриншот*/
.thumbnail{  
position: relative;  
z-index: 0;  
}  
.thumbnail:hover{  
background-color: transparent;  
z-index: 50;  
}  
.thumbnail span{ /*CSS for enlarged image*/  
position: absolute;  
background-color: #3d3d3d;  
padding: 5px;  
left: -1000px;  
border: 1px solid white;  
visibility: hidden;  
color: Yellow;  
text-decoration: none;  
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}  
.thumbnail span img{ /*CSS for enlarged image*/  
border-width: 0;  
padding: 2px;  
}  
.thumbnail:hover span{ /*CSS for enlarged image on hover*/  
visibility: visible;  
top: 0;  
left: 60px; /*position where enlarged image should offset horizontally */  
}  
/*---------------------*/

Ссылка должна быть такая :
Code
<a class="thumbnail" href="#">Ссылка<span>Здесь описание<img src="ВАША КАРТИНКА" width="500"/></span></a>

Также можно сделать чтобы при наведении на картинку появлялась еще картинка например увеличенная очень красиво получается ..
Code
<a class="thumbnail" href="#"><img src="ссылка на рисунок" width="100px" height="66px" border="0" /><span><img src="ссылка на рисунок" />Ваш текст</span></a>

Готово !
Мои файлы | Просмотров: 248 | Загрузок: 0 | Добавил: milena | Дата: 17.05.2014 | Комментарии (0)

Падающие лепестки роз для ucoz

Мои файлы | Просмотров: 498 | Загрузок: 0 | Добавил: milena | Дата: 16.05.2014 | Комментарии (0)

Мои файлы | Просмотров: 234 | Загрузок: 0 | Добавил: milena | Дата: 10.05.2014 | Комментарии (0)

Бегущая строка

Тег marquee, задающий бегущую строку, придуман когда-то для Internet Exlorer и другие браузеры не всегда корректно отображают работу различных его атрибутов.

для ЖЖ: «HTML-тэг marquee теперь вырезается из текста комментария при отображении (т.е. сам текст будет отображаться, но он не будет анимирован или скрыт).»
СУП. Релиз #75 от 4 Фев, 2011

your running text


your running text


your running text


your running text


your running text


your message here


your running text


your running text


your message here



your message here


your running text


your running text


your text here



your exciting message hereyour exciting message hereyour exciting message hereyour exciting message here

Останавливаем строку наведением курсора мыши






a16.gif



бонус

Сайты, где много движущихся анимашек:
glitter-graphics.com
bigoo.ws


Flying text


Мои файлы | Просмотров: 236 | Загрузок: 0 | Добавил: milena | Дата: 08.05.2014 | Комментарии (0)

простая строка - по умолчанию заданные размеры блока строки меняем фон блока движение слева направо постоянное движение снизу вверх сверху вниз меняем скорость на маленькую медленное движение текста снизу вверх и наоборот строка со ссылкой на сайт с примерами бегущая строка с изображением

HTML - код примеров бегущей строки.

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

Мои файлы | Просмотров: 283 | Загрузок: 0 | Добавил: milena | Дата: 08.05.2014 | Комментарии (0)

простая строка - по умолчанию заданные размеры блока строки меняем фон блока движение слева направо постоянное движение снизу вверх сверху вниз меняем скорость на маленькую медленное движение текста снизу вверх и наоборот строка со ссылкой на сайт с примерами бегущая строка с изображением
Мои файлы | Просмотров: 292 | Загрузок: 0 | Добавил: milena | Дата: 08.05.2014 | Комментарии (0)

простая строка - по умолчанию заданные размеры блока строки меняем фон блока движение слева направо постоянное движение снизу вверх сверху вниз меняем скорость на маленькую медленное движение текста снизу вверх и наоборот строка со ссылкой на сайт с примерами бегущая строка с изображением
Мои файлы | Просмотров: 274 | Загрузок: 0 | Добавил: milena | Дата: 08.05.2014 | Комментарии (0)

простая строка - по умолчанию заданные размеры блока строки меняем фон блока движение слева направо постоянное движение снизу вверх сверху вниз меняем скорость на маленькую медленное движение текста снизу вверх и наоборот строка со ссылкой на сайт с примерами бегущая строка с изображением
Мои файлы | Просмотров: 273 | Загрузок: 0 | Добавил: milena | Дата: 08.05.2014 | Комментарии (0)

1-10 11-11
Вход на сайт

Поиск

Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • База знаний uCoz