Форум

ddale · #1 (**permalink**) 04.07.2012, 18:21

Привет.

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

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);
});

Deff · #2 (**permalink**) 04.07.2012, 18:35

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

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

vadim5june · #3 (**permalink**) 04.07.2012, 19:01

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

Привет.

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

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

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

ddale · #4 (**permalink**) 04.07.2012, 19:08

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

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

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

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

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

ddale · #5 (**permalink**) 04.07.2012, 19:11

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

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

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

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

Deff · #6 (**permalink**) 04.07.2012, 19:12

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

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

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

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

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

vadim5june · #7 (**permalink**) 04.07.2012, 19:15

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

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

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

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

Deff · #8 (**permalink**) 05.07.2012, 03:21

<!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>

ddale · #9 (**permalink**) 05.07.2012, 13:35

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

Форум

Справочник

Discord чат

Курсы javascript