Круглая кнопка на JavaScript.

Реализация, круглой кнопки на JavaScript оказалась совсем несложной затеей, но возможно кому-то данная статья поможет сохранить 1-2 часа драгоценного времени.

Сначала определим несколько вспомогательных функций на JavaScript, которые позволяют определять координаты различных html-элементов относительно верхнего левого угла станицы, а так же текущие координаты мыши. Код подсмотрен на этой странице и используется с незначительными модификациями

  1.  
  2. //Определение координат элемента на страницы
  3. function getElementPosition(elemId)
  4. {
  5. var elem = typeof elemId == 'object' ? elemId : document.getElementById(elemId);
  6.  
  7. var w = elem.offsetWidth;
  8. var h = elem.offsetHeight;
  9.  
  10. var l = 0;
  11. var t = 0;
  12.  
  13. while (elem)
  14. {
  15. l += elem.offsetLeft;
  16. t += elem.offsetTop;
  17. elem = elem.offsetParent;
  18. }
  19.  
  20. return {"left":l, "top":t, "width": w, "height":h};
  21. }
  22.  
  23. //Определение текущих координат указателя мыши
  24. function mousePageXY(e)
  25. {
  26. var x = 0, y = 0;
  27.  
  28. if (!e) e = window.event;
  29.  
  30. if (e.pageX || e.pageY)
  31. {
  32. x = e.pageX;
  33. y = e.pageY;
  34. }
  35. else if (e.clientX || e.clientY)
  36. {
  37. x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)
  38. - document.documentElement.clientLeft;
  39. y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)
  40. - document.documentElement.clientTop;
  41. }
  42.  
  43. return {"left":x, "top":y};
  44. }
  45.  
  46.  

Теперь подготовим изображение для кнопки и описание ее стилей. Изображение содержит сразу все состояния кнопки, чтобы избежать задержек связанных с подгрузкой дополнительных файлов при наведении курсора на кнопку или ее нажатии.

Отображение соответствующей текущему статусу картинки производится с помощью

CSS

  1.  
  2.  
  3. div.roundbutton {
  4. padding: 0px;
  5. margin: 0px;
  6. float: left;
  7. width: 100px;
  8. height: 100px;
  9. z-index: 0;
  10. background: url("./round.gif") no-repeat -100px 0px;
  11. cursor: default;
  12. }
  13.  
  14.  

Определим функции отслеживающие относительное положение мыши и изменяющии статус кнопки.

  1.  
  2. function CheckRound(mousePos, layer)
  3. {
  4. var layerPos = getElementPosition(layer);
  5. var radius = layer.offsetWidth / 2;
  6. var centerX = layerPos.left + radius;
  7. var centerY = layerPos.top + radius;
  8.  
  9. var relativeX = (layerPos.left - mousePos.left) + radius;
  10. var relativeY = (layerPos.top - mousePos.top) + radius;
  11. return((relativeX * relativeX + relativeY * relativeY) <= radius * radius)
  12. }
  13.  
  14. function RoundButtonOnClick(event, layer)
  15. {
  16.  
  17. var mousePos = mousePageXY(event);
  18. if(CheckRound(mousePos, layer))
  19. {
  20. layer.pressed = false;
  21. event.cancelBubble = true;
  22. return true;
  23. }
  24. else
  25. {
  26. return false;
  27. }
  28. }
  29.  
  30. function RoundButtonOnOver(event, layer)
  31. {
  32. var mousePos = mousePageXY(event);
  33. if(CheckRound(mousePos, layer))
  34. {
  35.  
  36. if(layer.pressed)
  37. {
  38. layer.style.backgroundPosition = '-200 0';
  39. }
  40. else
  41. {
  42. layer.style.backgroundPosition = '0 0';
  43. }
  44. }
  45. else
  46. {
  47. layer.style.backgroundPosition = '-100 0';
  48. }
  49. }
  50.  
  51. function RoundButtonOnLeave(event, layer)
  52. {
  53. layer.style.backgroundPosition = '-100 0';
  54. }
  55.  
  56. function RoundButtonOnMouseDown(event, layer)
  57. {
  58. var mousePos = mousePageXY(event);
  59. if(CheckRound(mousePos, layer))
  60. {
  61. layer.style.backgroundPosition = '-200 0';
  62. layer.pressed = true;
  63. }
  64. else
  65. {
  66. layer.style.backgroundPosition = '-100 0';
  67. }
  68. }
  69.  
  70.  

Осталось лишь разместить кнопку на странице и переоперделить некоторые обработчики событий.

  1.  
  2. <div class="roundbutton" id="rbsample"
  3. onclick = 'RoundButtonOnClick(event, this) ? alert("Вы нажали круглую кнопку!!!") : null;'
  4. ondragend = 'RoundButtonOnClick(event, this) ? alert("Вы нажали круглую кнопку!!!") : null;'
  5. onmousemove = 'RoundButtonOnOver(event, this);'
  6. ondrag = 'RoundButtonOnOver(event, this);'
  7. onmousedown = 'RoundButtonOnMouseDown(event, this);'
  8. onmouseout = 'RoundButtonOnLeave(event, this);'
  9. >
  10. </div>
  11.  
  12.  

Результат вы можете увидеть чуть ниже.

Читайте в блоге

JavaScript Определение координат объектов и указателя мыши
Разноцветное облако ссылок
Знакомство с WordPress
Создание таблиц в плагине для WordPress
JavaScript Преобразование массивов и объектов в строку

Метки: js javascript

Комментарии:

Юрий @ 26.11.2011 05:39

Спасибо за пример, искал как раз про круглую кнопку!!

Войдите на сайт, чтобы оставить комментарий