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

622
10 из 10
Проголосовало: 12






Всем здрасти. И так, я открыл новую тему на форуме под названием: "Ваши идеи для создании скриптов...", и вот пользователь 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 2123
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
в страница добавления/редактирования материала отображается следуещее ,success:function(a){var a=$(a);!a.text().match('myWinError')? plusrep(a) : _uWnd.content('addEnt',a.text().match(/<div[^<>]*>(.+)<\/div>/i)[0])||$('input.manFlSbm').attr('disabled',0)}

и не работает ничего(, что делать?
  • modelswar3 написал:
  • Обновите ссылку!!
  • Marishka написал:
  • По просьбам поправили!.
    1. Делаем все как написано.
    2. Находим файл /Ucoz4/ctena_user2_wall_v2.js и меняем все в файле из нашего файла:
    Код
    http://mbs.usite.pro/ctena_user2_wall_v2.js
  • rayven написал:
  • в любом случае, всегда надо под свои нужды настраивать руками. А скрипт пригодиться, не тут, так там.
  • rayven написал:
  • даже Вовчик со мной согласен. tongue
    Последние темы
    Опрос
    500
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: