Анимация полосы в опросах by webo4ka.ru

558
10 из 10
Проголосовало: 11






Всем здрасти. И так, я открыл новую тему на форуме под названием: "Ваши идеи для создании скриптов...", и вот пользователь Soner, предложил идею скрипта:

Цитата Soner;63555
1. Анимированный вид опросов2. При ответе графики процентов плавно выходят (тоесть выезжают слева направо) было наподобие на сайте обзоров на лучшие сайты на юкозе


Мне идея понравилась, и я решил её выполнить. Скрипт делался для стандартного опроса. Суть его в том, что при ответе полосы рейтинга не просто будут появляться, а они будут медленно загружаться до своей точки, выглядит очень прикольно... Так же после того, как страница будет обновлена и пользователь просто будет видеть полосы без ответа, то они так же будут плавно полсти слева на право до своего места назначения, ну а теперь приступим к установке.

Установка:

Открываем Панель управления ---> Управление дизайном ---> Опросы ---> Вид формы опросов
и в самый низ вставляем данный код:

Код

<script type="text/javascript">  
  var number = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20'];  
  for(var i = 0; i < number.length; i++){  
  $('div.answer div').eq(i).addClass('rating');  
  $('div.answer div div').eq(i).addClass('rating-'+[i]);  
  var width = $('.rating-'+[i]).width();  
  $('.rating-'+[i]).css('width', '0px');  
  $('.rating-'+[i]).animate({width:''+width+'px'},5000);  
  } /* by webo4ka.ru*/  
  </script>  

<style>  
  .rating {background: #f4f4f4 !important; overflow:hidden; margin:5px 0px 5px 0px; height:20px !important;}  
  div[class^="rating-"] {height:23px !important; overflow:hidden !important; margin-top:-3px; position:relative;}  
  .rating-0 {background:#bcdfff !important;}  
  .rating-1 {background:#febabb !important;}  
  .rating-2 {background: #fcd5b9 !important;}  
  .rating-3 {background: #fdbaf4 !important;}  
  .rating-4 {background: #b9ecfc !important;}  
  .rating-5 {background: #befeb9 !important;}  
  .rating-6 {background: #fffcba !important;}  
  .rating-7 {background: #fdb9bf !important;}  
  .rating-8 {background: #fbcdb8 !important;}  
  .rating-9 {background: #ddfdbb !important;}  
  .rating-10 {background: #fdbaf4 !important;}  
  .rating-11 {background: #fcfdb9 !important;}  
  .rating-12 {background: #fdbaba !important;}  
  .rating-13 {background: #b8ecfc !important;}  
  .rating-14 {background: #b6dafb !important;}  
  .rating-15 {background:#5d9ad3 !important;}  
  .rating-16 {background:#e96465 !important;}  
  .rating-17 {background:#f6954у !important;}  
  .rating-18 {background:#dd8cd2 !important;}  
  .rating-19 {background: #75d0ed!important;}  
  .rating-20 {background: #5bc254!important;}  
  </style>


На этом, все, будут новые предложения по скриптам, пишите в тему (ссылка выше).
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://webo4ka.ru/
  • Всего комментариев: 6

Soner
0
Soner написал: Написано 20 Ноября 2015 в 21:16
Комментарий №6
все ГУД! Вовчик Красава!

Marishka
+2
Marishka написал: Написано 19 Ноября 2015 в 23:43
Комментарий №3
Код

<script type="text/javascript">  
  var number = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20'];  
  for(var i = 0; i < number.length; i++){  
  $('div.answer div').eq(i).addClass('rating');  
  $('div.answer div div').eq(i).addClass('rating-'+[i]);  
  var width = $('.rating-'+[i]).width();  
  $('.rating-'+[i]).css('width', '0px');  
  $('.rating-'+[i]).animate({width:''+width+'px'},5000);  
  } /* by webo4ka.ru*/  
</script>  

Вовчик
0
Вовчик написал: Написано 19 Ноября 2015 в 23:46
Комментарий №4
блин, пиксили забыл дописать(( молодец что заметил smile

Marishka
0
Marishka написал: Написано 19 Ноября 2015 в 23:49
Комментарий №5
Бывает smile

Soner
0
Soner написал: Написано 18 Ноября 2015 в 22:56
Комментарий №1
чет не пашет, я уж и стандартный вид поставил

Вовчик
0
Вовчик написал: Написано 19 Ноября 2015 в 00:16
Комментарий №2
понял кося, постараюсь в ближайшее время исправить... p.s. если получится(

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    469
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: