форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
19-01-2018 в 13:50 382

Буквы аватарки новая версия


Буквы аватарки  новая версия
Здравствуйте, сегодня публикую не свою работу скрипт мне скинули в качестве примера источник не у казали просто сказали что данную версию обсуждали на webo4ka.3dn.ru поэтому я просто оставлю ссылку на этот сайт и ссылку на демо jsbin.com так как это версия более качественная и не использует картинок то я её решил тоже добавить на сайт

Сам скрипт не настроен под uCoz и являлся примером я его поправил и теперь он подходит под систему и работает отлично

В данной версии скрипт работает с русским и латинским алфавитом так же с цифрами
если первая буква логина является символом то скрипт будет выводить просто чёрный квадрат

Данный вариант написан под условный оператор USERNAME

В нужное место ставим код который будет выводить букву
Код
<div class="name-box">
  <span><? substr($USERNAME$,0,1) ?></span>
</div>


Теперь подключим стили в нашу таблицу стилей на сайте
Код
/* Делаем noava как на Mail.ru */
.name-box {
  margin: 3px;
}
.name-box span,
.noava {
  display: inline-block;
  vertical-align: middle;
}
.noava {
  width: 45px;
  height: 45px;
  margin-right: 5px;
  background: #333;
  border-radius: 3px;
}
.noava > text {
  width: 45px;
  height: 45px;
  font-size: 23px;
  text-transform: uppercase;
  font-family: Arial;
  fill: rgba(255,255,255,.9);
  text-shadow: 0px 0px 3px rgba(255,255,255,.3);
}
.noava-0,
.noava-7,
.noava-а,
.noava-А,
.noava-с,
.noava-С,
.noava-н,
.noava-Н,
.noava-я,
.noava-Я,
.noava-ю,
.noava-Ю,
.noava-ё,
.noava-Ё,
.noava-e,
.noava-E,
.noava-l,
.noava-L,
.noava-s,
.noava-S,
.noava-z,
.noava-Z {
  background: #e74c3c;
}

.noava-1,
.noava-8,
.noava-б,
.noava-Б,
.noava-О,
.noava-о,
.noava-з,
.noava-З,
.noava-к,
.noava-К,
.noava-ы,
.noava-Ы,
.noava-f,
.noava-F,
.noava-m,
.noava-M,
.noava-t,
.noava-T {
  background: #e67e22;
}

.noava-2,
.noava-9,
.noava-Х,
.noava-х,
.noava-ч,
.noava-Ч,
.noava-ю,
.noava-Ю,
.noava-е,
.noava-Е,
.noava-щ,
.noava-Щ,
.noava-g,
.noava-G,
.noava-n,
.noava-N,
.noava-u,
.noava-U {
  background: #f1c40f;
}

.noava-3,
.noava-В,
.noava-в,
.noava-п,
.noava-П,
.noava-Л,
.noava-л,
.noava-Й,
.noava-й,
.noava-a,
.noava-A,
.noava-h,
.noava-H,
.noava-o,
.noava-O,
.noava-v,
.noava-V {
  background: #2ecc71;
}

.noava-4,
.noava-э,
.noava-Э,
.noava-т,
.noava-Т,
.noava-Д,
.noava-д,
.noava-и,
.noava-И,
.noava-У,
.noava-у,
.noava-b,
.noava-B,
.noava-i,
.noava-I,
.noava-p,
.noava-P,
.noava-w,
.noava-W {
  background: #3498db;
}

.noava-5,
.noava-г,
.noava-Г,
.noava-М,
.noava-м,
.noava-Ф,
.noava-ф,
.noava-Ж,
.noava-ж,
.noava-ц,
.noava-Ц,
.noava-c
.noava-C,
.noava-j,
.noava-J,
.noava-q,
.noava-Q,
.noava-x,
.noava-X {
  background: #34495e;
}

.noava-6,
.noava-Х,
.noava-х,
.noava-ч,
.noava-Ч,
.noava-ю,
.noava-Ю,
.noava-р,
.noava-Р,
.noava-ш,
.noava-Ш,
.noava-d,
.noava-D,
.noava-k,
.noava-K,
.noava-r,
.noava-R,
.noava-y,
.noava-Y {
  background: #8e44ad;
}


Теперь сам скрипт перед закрывающим тегом /body
Код
<script> $('.name-box').each(
  function(){
  var name = $(this).children('span').text(),
  str = name.replace(/[^0-9-A-Za-zА-Яа-яЁё]/g, ''),
  i = str.substr(0,1);
  $(this).html('<svg class="noava noava-' + i + '"><text x="15.5" y="31">' + i + '</text></svg>');
  }
  );</script>


Готово

8

Комментарии

CbIPoK2513 14-05-2018 в 15:54
Цитата
Без картинок
, но в итоге всё равно с картинками :D
omsi2mod 23-02-2019 в 23:07
Можно проще реализовать без скрипта, на чистом css
waak 23-02-2019 в 23:49
Можно используя условные операторы для получения первой буквы но они не везде подойдут
Добавлять комментарии могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Автор


Похожие материалы

Реклама



Дополнение

Демонстрация результата либо показана на отдельной странице, либо просто показана на скриншоте. В исключительных случаях, когда нет возможности показать работу даже на скриншоте, используется развернутое описание. Описание есть у каждого материала, этот пункт важен, но иногда описание бывает косвенным, пустословным. Это относится к тем материалам, которым не нужна детальная инструкция.

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru