Назад
Создание прибыльного бизнеспроекта на базе сайта

SEO + ASP.NET 4.0 + БИЗНЕСМОДЕЛЬ = ПРИБЫЛЬНЫЙ САЙТ

Инструмент быстрого построения прибыльного онлайн бизнеса своими силами без капиталовложений за 4 месяца все подробности на SEO + ASP.NET 4.0.

Подписка на рассылку

МАГИЯ C#!

Создание вебсайта с формой автоматического приема онлайн платежей по WebMoney!
Ваше имя
Ваш e-mail
Уроки по ASP.NET c# ADO.NET
     

18 видеоуроков
более 5 часов
по созданию сайта,
выполняющего
продажи ваших продуктов (физических/электронных) на полном автомате с личным оповещением на e-mail, а также ...
DVD-курс по C#, .NET

3 часть. Введение в ASP.NET. WebServices Профессиональная подготовка разработчика по языку C# на платформе .NET

asp.net webservices dvd c# gridview Гудок курс Более 65 подробных видео уроков по теоретическим основам технологии сайтостроения ASP.NET и процессу создания и использованию вебсервисов.

DVD-курс по C#, .NET

2А часть. XML/TXT в аспекте ADO.NET Профессиональная подготовка разработчика по языку C# на платформе .NET

xml txt dvd c# ADO ADO.NET Гудок курс 70 подробных видео уроков по работе с форматами xml, txt, по работе с файлами и директориями. Разработка высокоорганизованных свойств для значительного сокращения объема исходного кода и облегчения дальнейшей модификации и многое-многое другое...

DVD-курс по C#, .NET

1 часть. Windows Forms Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок

185 подробнейших уроков (70 часов) лекций в формате видеоуроков по теории языка c# и платформы .NET. Практическое закрепление теоретического материала на примере создания Windows Forms - приложения видеоигры "Tanks"

DVD-курс по C#, .NET

2 часть. ADO.NET/SQL Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок ADO.NET sql

165 подробных видео уроков по созданию приложений распределенных баз данных на примере разработки проектов с использований технологий ADO.NET (Connected model, Disconnected model, Typed DataSet, ...)

Бодибилдинг
Программы тренировок для занятий штангой, гантелями; описание тренажеров

Я записываю курсы!
  Курс валют

НБУ курс евро






RollOver кнопки средствами JavaScript (Jquery)



Всем привет!!!!!

Я знаю, давненько я ничего не заливал, но были на то свои причины. Я получил аттестат об окончании средней школы! Меня можно поздравить. Ну не буду разводить дискуссию и начну.

Урок будет посвящён сравнению кнопок на xhtml + css. Да, вы не ошиблись с xhtml + css + javascript (jQuery эффектом).

Результат можно посмотреть тут

Шаг 1 - HTML

Каждый желает иметь особенные кнопки, ведь так? Кнопки для различных целей.

В этой части кода будет реализован простой сценарий HTML ссылки, при котором кнопка будет вести на скачивание файла.

Это будет выглядеть примерно так:

<a href="path/to/download.zip" class="button"></a>

Шаг 2 - CSS

Добавьте следующий CSS код в ваш HTML файл:

.button {  
    width:570px;  
    height:64px; /* Обратите внимание, что высота 
                    не является высотой всего спрайта, 
                    но лишь высотой одной кнопки */  
    display:block;
    
    /*Путь к спрайту*/
    background-image:url(images/downloadbutton.png);   
    
    background-position: top; /* в фоновой позиции 
    (в сочетании с высотой!) дает возможность, 
    что только в верхней части будет видно спрайт */  
}  

Когда вы примените код CSS выше, вы увидите только серую кнопку, потому что она расположена выше зелёной кнопки, а высота её 64px.

Теперь реализуем RollOver при наведении курсора мыши.

.button:hover
{  
    width:570px;  
    background-position: bottombottom;  
    height:64px;  
    background-image:
    url(images/downloadbutton.png) no repeat;  
}   

Когда вы примените данный код CSS, вы увидите только зеленую кнопку (при наведении курсора мышки) "Download", потому что она расположена в нижней части изображения спрайта, а её высота только 64px

Шаг 3 - Эффект наведения

Переход будет сглаживаться с помощью JavaScript. Мы собираемся использовать популярную библиотеки Jquery. Скачать её можно с официального сайта www.jquery.com, http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

Шаг 4 - Подключение библиотеки.

В заголовке страницы вставьте ссылку на библиотеку:

<script type="text/javascript" 
src="path/to/jquery-1.3.2.min.js"></script>  

После этого мы можем добавить следующий код между главными тегами.

<script type="text/javascript">  
    $(document).ready(function() 
    {  
        // Добавим класс "button" 
        //как и в CSS с точкой перед ним 
        $('.button').append(
            '<span class="hover"></span>')
        .each(function () 
        {  
            var $span = $('> span.hover', this)
                .css('opacity', 0);  
            $(this).hover(function () 
            {  
                //Изменение числа 500
                //приведёт к изменению скорости эффекта
                $span.stop().fadeTo(500, 1); 
                            
            }, function () 
            {  
        //Изменение числа 500 приведёт
        //к изменению скорости эффекта
        $span.stop().fadeTo(500, 0);  
                                     
            });  
        });  
    });  
</script>

У вас наверняка возник такой вопрос: "Как работать с несколькими кнопками на одной странице?"

Ответ: Если у вас есть несколько кнопок на одной странице, и вы хотите добавить эффект затухания, вы можете дать ему другой класс в HTML и добавить в JavaScript-код, который указан выше.

И вы также должны их разделить запятой. (Пример: '.button, .buttonTwo')

Шаг 5 - Редактирование CSS

.button 
{  
    position:relative;  
    display:block;  
    height: 64px;  
    width: 570px;  
    background:url(images/downloadbutton.png) no-repeat;  
    background-position: top;  
}  
.button span.hover 
{ 
    position: absolute;  
    display: block;  
    height: 64px;  
    width: 570px;  
    background: url(images/downloadbutton.png) no-repeat;  
    background-position: bottombottom;  
}  

Вот и все, посмотреть демо можно прямо тут Кнопки на Jquery



Больше информации читайте по теме:



Оценить статью:

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

Частичное, или полное копирование материала данной статьи возможно лишь при размещении ссылки на данную страницу.


            
        




Имя:  


Текст комментариев (не больше 600 знаков):  
введите не более 600 знаков



Введите символы с картинки:
Капча имеет "срок годности". Поэтому, если необходимо обновите страницу.



Черный список покупателей
c# курс Гудок   курс по ASP.NET Гудок   курс по ADO.NET Гудок   курс по XML txt Гудок   курс по рефлексии и многопоточности Гудок