Ссылки

Поиск

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

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

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

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

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

Последние статьи

Сайт для фирмы-изготовителя натяжных потолков 0
Антиспам «Я не робот» 0
За что воюет Украина и когда всё это кончится 12
Удаление родителя текущего элемента на jQuery 0
Простой аккордеон на jQuery №3 0

ReloadCMS является одной из лучших систем для создания дорвеев, так как размножается с сайта на сайт простым копированием.

RSS фиды

RSS Статьи
RSS Клиентам
RSS Новости
RSS Файлы
RSS Форум

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

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

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>
Что получилось:

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

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

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

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