Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Движение при зажатии (https://javascript.ru/forum/css-html/49522-dvizhenie-pri-zazhatii.html)

TimohaP 16.08.2014 22:57

Движение при зажатии
 
$(function () {
    var c1 = $("#unlockerline"),
        c2 = $("#unlockerlinebullet"),
        c1width = c1.width(),
        c1height = c1.height(),
        c2width = c2.width(),
        c2height = c2.height(),
        halfLeft = Math.round(c2width / 2);
        $("#unlocker").mousemove(function (e) {
            function inInterval(min, max, x) {
                return x >= min && x <= max;
            }
            var os = c1.offset();
    
            if (inInterval(os.left, os.left + c1width, e.pageX) && inInterval(os.top, os.top + c1height, e.pageY)) {
                var left = e.pageX - os.left - halfLeft;
    
                if (left > c1width - c2width) left = c1width - c2width;
                c2.css({
                    left: left < 0 ? 0 : left
                });
            }
    
        })
});

<div id="unlocker">
<div id="unlockerline"> <span>slide to unlock</span>

<div id="unlockerlinebullet"></div>
</div>
</div>
#unlocker {
position:absolute;
text-align:center;
height:calc(9em + 20px);
padding:40px 0;
top:calc(50% - ((9em + 40px) / 1.5));
width:calc(50% - 2px);
left:calc(50% + 2px);
}
#unlockerline {
background:rgba(0, 0, 0, .2);
width:250px;
height:60px;
position:absolute;
top:calc(50% - 30px);
left:calc(50% - (50% / 2));
border-radius:60px;
overflow:hidden
}
#unlockerline #unlockerlinebullet {
background:rgba(255, 255, 255, .3);
width:60px;
height:60px;
border-radius:60px;
z-index:2;
transition:.3s;
position:absolute;
left:0;
cursor:pointer;
transition-property:background
}
#unlockerline #unlockerlinebullet:active {
background:rgba(255, 255, 255, 1);
transition:.3s
}
#unlockerline span {
z-index:1;
position:absolute;
width:100%;
font-size:1em;
top:calc(50% - 1em + 5px);
left:0;
color:rgba(255, 255, 255, .8);
font-family:Segoe UI;
text-align:center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
есть такой код, инициализирует движение div’a при движение мыши, как сделать, чтобы код выполнялся при зажатии (т.е mousemove и onclick одновременно).

Viral 18.08.2014 11:03

Так, например..


Часовой пояс GMT +3, время: 05:06.