| Pasan
не в сети | 0:37 AM 2024-09-27 | Сообщение # 1 |
 Админ
Администраторы
|
Здравствуйте, сегодня публикую не свою работу скрипт мне скинули в качестве примера источник не у казали просто сказали что данную версию обсуждали на 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>
|
|
| |
