Любой способ сделать наклонные / диагональные указатели мыши через css / javascript? - PullRequest
Новая
       11

Любой способ сделать наклонные / диагональные указатели мыши через css / javascript?

1 голос
/ 18 апреля 2010

У меня есть окно, построенное через HTML-границы.

Я хочу соединить нижний левый угол с верхним правым углом диагональной линией. Неважно, с html / css или с использованием фонового изображения. Я разберусь с этой частью позже. 

------
-   /-
-  / -
- /  -
-/----

Вот сложная часть: я хочу, чтобы происходило по-другому, в зависимости от того, над какой стороной линии находится мышь. Я сделаю что-то вроде отображения текста или поменяю цвет фона.

Возможно ли это в веб-программировании? Я думал о том, чтобы сделать вычисление типа «суммы Римана» с кучей невидимых элементов. Любой более простой способ?

Спасибо!

Ответы [ 6 ]

3 голосов
/ 18 апреля 2010

Вам нужно получить координаты mouseX и mouseY, разделить нижнюю и левую координаты и решить простое линейное уравнение: 

y
|   /
|  / y &lt (imageHeight/imageWidth)*x
| /
|/
/----------x

код: 


function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }
//source: blog.firetree.net/2005/07/04/javascript-find-position/


//definition of widths and heights:
var imageWidth = [];
var imageHeight = [];
imageWidth["one"] = 100;
imageHeight["one"] = 300;

imageWidth["two"] = 200;
imageHeight["two"] = 300;
//etc


function checkClick(divId) {
    var posx = 0;
    var posy = 0;
    var e = window.event;
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {  
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }
    // source of mouse position: www.quirksmode.org/js/events_properties.html#position

    valX = posx - findPosX(document.getElementById(divId));
    valY = posy - (document.getElementById(findPosY(divId))+imageHeight[divId]); //we need to get the bottom-left corner
    if(valY &lt posX*imageHeight[divId]/imageWidth[divId]) {
    //we are below the line - in lower part of the div
    }
    else {
        //we are in the upper part
    }}

И это все. Вам нужно только добавить checkClick в качестве обработчика onmouseover и установить imageWidth и imageHeight

3 голосов
/ 18 апреля 2010

единственный (простой) способ, который я могу придумать, - это использовать img для вашего блока сплиттета (или использовать прозрачный GIF того же размера, который расположен сверху вашего блока) и использовать карту изображений для определения областей диффузии.

здесь вы можете увидеть простой пример, как это сделать: 

  <img src="image.png" width="345" height="312" border="0" alt="this is my image" usemap="#mymap">
  <map name="mymap">
    <area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
    <area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
  </map>

разница в том, что вы должны использовать форму полигона для ваших областей (Google поможет найти синтаксис)

2 голосов
/ 18 апреля 2010

Вы можете сделать это с помощью Javascript (+ JQuery, чтобы сделать жизнь проще). Пример здесь. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#div').mousemove(function (e) {
                    var div = $('#div');
                    var x = e.pageX; // Mouse position X (relative to window)
                    var y = e.pageY; // Mouse position Y
                    var w = div.width(); // Width of box
                    var h = div.height(); // Height of box
                    var xO = div.offset().left; // X position of box (relative to window)
                    var yO = div.offset().top; // Y position of box

                    var left = w/h*(yO-y)+xO+w > x;

                    $('#div').html(left ? 'left' : 'right');
                });
            })
        </script>
    </head>
    <body>
        <div id="div" style="width: 500px; height: 660px; border: 1px solid blue"></div>
    </body>
</html>
1 голос
/ 18 апреля 2010

римановы суммы? вау, ты хардкор.

Оформить заказ CSS3 трансформации. Совместимость браузера может быть проблемой, если вы хотите поддерживать более старые браузеры / версии. Используя функцию преобразования и поворачивая данный div на X градусов, вы получите наклонную линию. Затем просто установите обратный вызов при наведении курсора мыши в Javascript.

Оформить рабочий пример здесь . Протестировано на Chrome, но должно работать и на Firefox и Safari.

HTML 

<div id="slanted">..</div>

1012 * CSS * 

#slanted {
    transform: rotate(45deg);
}

Javascript 

var div = document.getElementById("slanted");
div.addEventListener('mouseover', function() {
    // so something
}, false);
1 голос
/ 18 апреля 2010

С большим количеством элементов div и span, которые можно собрать вместе, вы можете сделать это, но он стал слишком тяжелым для медленных соединений. Вы также можете использовать фоновое изображение и изменить его с помощью JavaScript

и окончательное решение - использовать Flash, и это очень легко реализуется

0 голосов
/ 18 апреля 2010

Вы можете нарисовать его как векторное изображение, используя javascript, так как основные браузеры поддерживают различные степени векторного рисования.

Вы просто установили html-блок, который будет содержать вашу векторную графику, а затем вставьте все, что вам нужно.

Посетите библиотеку raphael.js для легкой интеграции этой идеи.

http://raphaeljs.com/

Я использовал его в прошлом, он довольно плавный для анимации вдоль путей, поворотов и анимации текста, что бы вы ни пытались сделать здесь, вы были немного расплывчаты в этом.

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

Например, я применил ослабление SHM / экспоненциального затухания к вращению, чтобы имитировать колебание листа на ветру. IE полностью провалился, поэтому мне пришлось переписать весь сценарий с линейным замедлением только для этого POS-браузера.

Но да, поскольку он основан на javascript, вся обычная обработка событий, с которой вам удобно работать, может применяться к объектам, сгенерированным Raphael, точно так же, как и все остальное в вашем DOM, что Flash не может сделать так хорошо .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...