Движение при зажатии
$(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, время: 10:54. |