главная

Теги:


Подсветка курсора мыши на неактивных закладках

Браузер Google Chrome имеет интересный эффект в интерфейсе пользователя. При наведении курсора на неактивную закладку, она становится немного светлее, а движение курсора мыши по ней сопровождается подсветкой (градиентом от светлого участка под курсором мыши до темного на некотором удалении).

В данном уроке мы разберемся, как создать такой эффект на своих страницах.

Радиальный градиент

Подсветка будет создана с помощью радиального градиента. Один из способов получить такой эффект - использовать изображение в формате PNG с прозрачностью. Но мы будем использовать радиальный градиент CSS3, что поможет сократить требования к ресурсам и упростит смену цвета.

На текущий момент только браузеры семейств Webkit и Mozilla могут работать с радиальными градиентами. Синтаксис:

background: -webkit-gradient(
	  /* radial, <точка>, <радиус>, <точка>, <радиус>, <стоп>,  [<стоп>, ] <стоп> */
	  radial, 500 25%, 20, 500 25%, 40, from(white), to(#ccc)
	);
	 
	background: -moz-radial-gradient(
	  /* [<позиция>,] [<форма> || <размер>,] <стоп> [, <стоп>], <стоп> */
	  500px 25%, circle, white 20px, #ccc 40px
	);

JavaScript и положение курсора мыши

Теперь мы знаем, как использовать градиент CSS3, но теперь надо определить точку, в которой находится курсор мыши, чтобы использовать в ней градиент. CSS не может предоставить нам информации о положении курсора мыши. Нужно использовать JavaScript по следующему плану:

1. Когда курсор мыши проходит над нужной областью.
2. Определяем положение курсора
3. Применяем градиент в точке его расположения
4. Удаляем градиент, когда курсор покидает нужную область

Мы будем использовать jQuery.

 

var x, y;
	 
	$('#highlight-area').mousemove(function(e) {
	 
	  x  = e.pageX - this.offsetLeft;
	  y  = e.pageY - this.offsetTop;
	  xy = x + " " + y;
	 
	  // Используем градиент с полученными координатами
	 
	}).mouseleave(function() {                     
	 
	  // Удаляем градиент
	 
	});

Префиксы разных браузеров

При установке градиента надо учесть особенности синтаксиса для получения кросс-браузерного решения.

var bgWebKit = "-webkit-gradient(radial,
 " + xy + ", 0, " + xy + ", " + gradientSize + ", from(" + lightColor + ")
, to(rgba(255,255,255,0.0))), " + originalBGplaypen;
	var bgMoz    = "-moz-radial-gradient(" + x + "px " 
+ y + "px 45deg, circle, " + lightColor + " 0%, " + originalBGplaypen + 
" " + gradientSize + "px)";
	 
	$(this)
	        .css({ background: bgWebKit })
	        .css({ background: bgMoz });

Подсветка закладок

Теперь сделаем подсветку закладок. Разметка HTML вполне обычная для таких решений:

ul class="nav clearfix">
	   
  • Главная
  • О нас
  • Клиенты
  • Контакты
  • Стили CSS для демонстрационных закладок:

    .nav {
    	        list-style: none;
    	        border-bottom: 1px solid #a0a0a0;
    	        padding: 10px 10px 0 10px;
    	}
    	.nav li { display: inline; }
    	.nav li.active a {
    	        position: relative;
    	        z-index: 1;
    	        bottom: -2px;
    	        margin-top: -2px;
    	        background: #eee;
    	        padding-top: 8px;
    	        padding-bottom: 8px;
    	}
    	.nav li a {
    	        float: right;
    	        text-decoration: none;
    	        position: relative;
    	        padding: 7px 50px;
    	        margin: 0 0 0 -8px;
    	        color: #222;
    	        background: #d8d7d8;
    	        -webkit-border-top-right-radius: 20px 40px;
    	        -webkit-border-top-left-radius: 20px 40px;
    	        -moz-border-radius-topleft: 20px 40px;
    	        -moz-border-radius-topright: 20px 40px;
    	        -webkit-box-shadow: inset 1px 1px 0 white;
    	        -moz-box-shadow: inset 1px 1px 0 white;
    	        border: 1px solid #a0a0a0;
    	}

    Каждая из данных закладок является областью, в которой мы планируем использовать подсветку. Для каждой закладки, которая не является активной, будет выполняться код обработчика события mousemove, который выполняет реализацию эффекта:

    var originalBG = $(".nav a").css("background-color");
    	 
    	$('.nav li:not(".active") a')
    	.mousemove(function(e) {
    	 
    	    x  = e.pageX - this.offsetLeft;
    	    y  = e.pageY - this.offsetTop;
    	    xy = x + " " + y;
    	 
    	    bgWebKit = "-webkit-gradient(radial, " + xy + ", 0,
             " + xy + ", 100,from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), 
              " + originalBG;
    	    bgMoz    = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, "
             + lightColor + " 0%, " + originalBG + " " 
             + gradientSize + "px)";
    	 
    	    $(this)
    	      .css({ background: bgWebKit })
    	      .css({ background: bgMoz });
    	 
    	}).mouseleave(function() {
    	        $(this).css({ background: originalBG });
    	});

    Заключение

    Приведенный код, конечно же, нельзя использовать в таком виде в реальных проектах. Требуется работа напильником - нужно корректно обрабатывать ситуацию со сменой активной закладки.

    Однако целью данного урока являлась демонстрация идеи и техники ее исполнения. Что успешно реализовано.

    Может быть, уважаемый читатель предложит более изящное решение поставленной задачи.



    Источник урока: css-tricks.com/moving-highlight/

    Урок Создан:2011-02-07 Просмотров:3655

    Добавить комментарий:

    
    Copyright© 2009 Hosted by Zhost