$(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
ointer;
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 одновременно).
