Нужна помощь с javascript - Форум успешных вебмастеров

Cookie Monster · 10.08.2016, 21:28

Привет всем!

Разрабатываю тут кое какие ништячки и там имеется такой код
jQuery(document).on('mousemove', function(e){
jQuery('.blabla').css({
left: e.clientX - 100,
top: e.clientY - 100
});
});

мне надо что бы вот эти координаты (которые сейчас в коде) были присвоены не сразу, а через 10секунд от инициализации. И потом не менялись.
jQuery('.blabla').css({
left: e.clientX - 100,
top: e.clientY - 100
});

а до этого были такие координаты
jQuery('.blabla').css({
left: e.clientX - 0,
top: e.clientY - 0
});

Я уже и таймауты пробовал всякие, и гуглил,
что то не получается у меня(

Кто нибудь поможет за пиво?

denverzzz · 10.08.2016, 22:46

PHP код:


			
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
    <div id="test_block" style="position: relative;">
        <div class="blabla" style="position: absolute;">blabla</div>
    </div>
    
    <script type="text/javascript">
    jQuery(function()
    {
        jQuery('#test_block').on('mousemove', function(e)
        {
            setTimeout(function()
            {
                jQuery('.blabla').css({
                    left: e.clientX + 100,
                });
                
                jQuery('#test_block').off('mousemove');
            }, 3000);
        });
    });
    </script>
</body>
</html>

оно?

Cookie Monster · 10.08.2016, 23:12

спасибо. сейчас затестирую.

Cookie Monster · 11.08.2016, 00:16

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

PHP код:


			
function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
var xx = -50; var yy = -50;
var movementTimer = 1;
jQuery(document).on('mousemove', function(e){

        jQuery('.blabla').css({
            left:  e.clientX - xx,
            top:   e.clientY - yy
        });

        if(movementTimer==1){
            var movementTimer = 2;
            setTimeout(function(){
                var xx = getRandomInt(80, 260); 
                var yy = getRandomInt(60, 220);
            }, 3000);
        }

});

denverzzz · 11.08.2016, 01:02

если правильно понял то вот,
код немного быдлокодный (есть глобальные переменные), но вроде работает

PHP код:


			
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
    <div id="test_block" style="position: relative;">
        <div class="blabla" style="position: absolute;">blabla</div>
    </div>
    
    <script type="text/javascript">
    var globalX = -50;
    var globalY = -50;
    
    jQuery(function()
    {
        var timerOn = false;
        
        jQuery(document).on('mousemove', function(e)
        {
            setBlockXY(e);
            
            if (!timerOn)
            {
                timerOn = true;
                
                setTimeout(function()
                {
                    globalX = getRandomInt(80, 260);
                    globalY = getRandomInt(60, 220);
                    setBlockXY(e);
                    timerOn = false;
                }, 3000);
            }
        });
    });

    function setBlockXY(e)
    {
        jQuery('.blabla').css({
            left: e.clientX - globalX,
            top: e.clientY - globalY
        });
    }
    
    function getRandomInt(min, max)
    {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    </script>
</body>
</html>

Cookie Monster · 11.08.2016, 01:06

Во, сработало так!
В переменных проблема была.
Надо было глобальными сделать.

PHP код:


			
function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
window.xx = -50; window.yy = -50;
window.movementTimer = 1;
jQuery(document).on('mousemove', function(e){

        jQuery('.blabla').css({
            left:  e.clientX - window.xx,
            top:   e.clientY - window.yy
        });
        if(window.movementTimer==1){
            
            window.movementTimer = 2;
            setTimeout(function(){
                window.xx = getRandomInt(80, 260); 
                window.yy = getRandomInt(60, 220);
            }, 3000);
        }

});

Спасибо

denverzzz · 11.08.2016, 01:08

оки

roddik · 11.08.2016, 11:52

Цитата:

Сообщение от Cookie Monster

Во, сработало так!
В переменных проблема была.
Надо было глобальными сделать.

PHP код:


			
function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

window.xx = -50; window.yy = -50;

window.movementTimer = 1;

jQuery(document).on('mousemove', function(e){



        jQuery('.blabla').css({

            left:  e.clientX - window.xx,

            top:   e.clientY - window.yy

        });

        if(window.movementTimer==1){

            

            window.movementTimer = 2;

            setTimeout(function(){

                window.xx = getRandomInt(80, 260); 

                window.yy = getRandomInt(60, 220);

            }, 3000);

        }



});

Спасибо

просто надо было убрать второй раз var, var

и чтобы movementTimer не юзать, зачейнь через .once второй кусок функции