Поиск

 
Новости, Статьи
Форум
Файлы

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

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

Для создания сайтов небольших фирм существует только одна бесплатная специализированная CMS на русском языке - ReloadCMS, которую активно развивает автор этого сайта.

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

Свойство CSS 3
Код:

backgroundgradient(lineartop,  '#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>
Что получилось:

Примечание: под некоторыми ИЕ не работает, потому что он осел:)
18.01.2013 12:04 Автор/источник: Den1xxx

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

Вы не залогинены! Регистрация

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