Javascript-форум - Отслеживание местоположения курсора. Событие mousemove. Тормоза

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Отслеживание местоположения курсора. Событие mousemove. Тормоза (https://javascript.ru/forum/jquery/29607-otslezhivanie-mestopolozheniya-kursora-sobytie-mousemove-tormoza.html)

Отслеживание местоположения курсора. Событие mousemove. Тормоза

Привет.

Не могу понять почему тормозит стилизованный курсор. Он иногда пропадает. Мигает. Или просто "скачет" за мышкой. Плавности вообще нет.

HTML:

<div id="cursor">
    <span></span><p>Дизайн интерьера<br>загородного дома</p>
</div>

<span> - на бэкграунде стоит картинка

CSS:

#cursor {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    cursor: none !important;
    width: 200px; height: 74px;
    z-index: 300;
    color:#fff;
    font:12px/14px Arial, Geneva, sans-serif;
    padding: 0;
    text-shadow:0 1px 1px rgba(0,0,0,0.4);
    -webkit-transition: display 1.5s ease-in-out;
    -moz-transition: display 1.5s ease-in-out;
    -o-transition: display 1.5s ease-in-out;
    transition: display 1.5s ease-in-out;
}

JS:

$('#slider').mousemove(function(a){
    $('#cursor').css('left', a.pageX).css('top', a.pageY);
});

ddale,
text-shadow: уберите - (тексты прорисовывайте на фоновой картинке)

И координаты считывайте чисто js http://javascript.ru/tutorial/events...entx-y-pagex-y

Цитата:

Сообщение от ddale (Сообщение 186321)

Привет.

Не могу понять почему тормозит стилизованный курсор. Он иногда пропадает. Мигает. Или просто "скачет" за мышкой. Плавности вообще нет.

у Вас нестилизованный(курсор мыши) курсор то попадает на объект с id=slider то с id=cursor
лучше задайте курсору z-index:-1

#cursor {
    display: block;
    ......
    z-index:-1
   ......}

Цитата:

Сообщение от Deff (Сообщение 186322)

В смысле прорисовывать на фоновой картинке?
По ссылке которую Вы дали используются как раз pageX/pageY.

Если Вас не затруднит дайте, пожалуйста, развернутый ответ. Я неплохо верстаю, но JS у меня на уровне плинтуса.

Цитата:

Сообщение от vadim5june (Сообщение 186332)

у Вас нестилизованный(курсор мыши) курсор то попадает на объект с id=slider то с id=cursor
лучше задайте курсору z-index:-1

#cursor {
    display: block;
    ......
    z-index:-1
   ......}

Спасибо, но не подходит. Теперь просто не видно курсора. Z-index у #slider тоже пробовал убирать совсем или выставлять другие отрицательные значения. Курсор как раз таки стилизованный. Там на span бэкграунд висит.

ddale,
Вы выставялете в стиле для курсора text-shadow:0 1px 1px rgba(0,0,0,0.4)
это тень для текста,
Дык - А тект для кусора большая нагрузка
B) Тень для текста в курсоре огромная нагрузка

Цитата:

Сообщение от ddale

По ссылке которую Вы дали используются как раз pageX/pageY.

Да Используется - но не через JQ

И замечание по делу поднять курсор выше - z-index: 20000;

Цитата:

Сообщение от ddale (Сообщение 186336)

когда Ваш курсор попадает на стилизованный курсор то событие mousemove перестает работать-если нельзя его вниз засунуть(z-index:-1) то хотя бы ниже курсора сместить пикселов на 10

var y=a.pageY+10;
  $('#cursor').css('left', a.pageX).css('top',y);

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<title>Активные темы</title>

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#slider_wrap {
    margin:20px;
    overflow:hidden;
    position: relative;
    width: 555px;
    height: 345px;
    padding:55px;
    border: #B4B4C4 dashed 1px;
}

#slider:hover #cursor{
    opacity:1.0;
}
#slider{
    width: 100%;
    height: 100%;
    border: #B7BEBE outset 2px;
}
#cursor {
    opacity:0.0;
    z-index:100;
    position: absolute;
    cursor:crosshair!important;
    background-image:url(http://s1.uploads.ru/i/NFXCp.png);
    width: 105px; height: 145px;

   transition-property:opacity;
   transition-duration: 0.3s;
  -o-transition-property:opacity;
  -o-transition-duration: 0.3s;
  -moz-transition-property:opacity;
  -moz-transition-duration: 0.3s;
  -webkit-transition-property:opacity;
  -webkit-transition-duration: 0.3s;
  -ms-transition-property:opacity; /* IE9+ */
  -ms-transition-duration: 0.06s;

}

</style>
</head>
<body>
<div id="slider_wrap">

   <div id="slider">

      <img src="http://s1.uploads.ru/i/MxNcZ.png" width=100% height=100%/>

<span id="cursor"></span>
  </div>
</div>
<script type="text/javascript">
    var Cur=$('#cursor');
$('#slider').mousemove(function(e){
    
    Cur.css({
         'left':parseInt(e.pageX-67)+'px',
         'top':parseInt(e.pageY-92)+'px'
    });
});
</script>


</body>
</html>

Deff,
спасибо Вам :)