Движение при зажатии
$(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 одновременно). |
Так, например..
|
| Часовой пояс GMT +3, время: 09:11. |