Ссылки

Поиск

Привет, Гость

Войти
Идентификация
Я забыл свой пароль
Регистрация

Обновления на форуме

Блок новостей в виде блога 2 >>
Игры для сайта 34 >>
Сервис создания тестов 94 >>
Дед 1 >>
На сайте регистрация пользователей спамом 3 >>

Все мои клиенты получают первоначальное обучение и ежегодное обновление системы совершенно бесплатно.

RSS фиды

RSS Файлы
RSS Новости
RSS Форум

Статьи → Статьи → Разработка сайтов → Градиент на jQuery

Свойство CSS 3
Код: 
php background: gradient(linear, top,  '#FFF',  '#000');
как выяснилось, не работает в jQuery.



Поэтому путем экспериментов была найдена функция, которой и поделюсь.
Код: 
function show_gradient(selector,start_color,end_color){

$('body').find(selector)

.css('background-image', '-webkit-linear-gradient('+start_color+', '+end_color+')')

.css('background-image', '-moz-linear-gradient('+start_color+', '+end_color+')')

.css('background-image', '-o-linear-gradient('+start_color+', '+end_color+')')

.css('background-image', '-ms-linear-gradient('+start_color+', '+end_color+')')

.css('filter', 'progid:DXImageTransform.Microsoft.gradient(startColorstr='+start_color+',endColorstr='+end_color+',GradientType=0)')

.css('background-image', 'linear-gradient('+start_color+', '+end_color+')');

}
Пример использования.

Нарисуем градиент на блоке, и по клику на кнопке поменяем:
Цитата:
<script type="text/javascript">

function show_gradient(selector,start_color,end_color){

$('body').find(selector)

.css('background-image', '-webkit-linear-gradient('+start_color+', '+end_color+')')

.css('background-image', '-moz-linear-gradient('+start_color+', '+end_color+')')

.css('background-image', '-o-linear-gradient('+start_color+', '+end_color+')')

.css('background-image', '-ms-linear-gradient('+start_color+', '+end_color+')')

.css('filter', 'progid:DXImageTransform.Microsoft.gradient(startColorstr='+start_color+',endColorstr='+end_color+',GradientType=0)')

.css('background-image', 'linear-gradient('+start_color+', '+end_color+')');

}


</script>

<div id="gradient" style="position:relative;width:300px;height:150px;">

</div>

<button onclick="

show_gradient('#gradient','#6E146B','#B495B5');

$(this).html('Градиент блока поменялся!');

">

Поменять градиент

</button>

<script type="text/javascript">

show_gradient('#gradient','#B495B5','#6E146B')

</script>
Что получилось:



Примечание: под некоторыми ИЕ не работает, потому что он осел:)
Дата 2013-01-18 13:04:24

Комментировать

Вы не залогинены!

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.