Написал простенький код с целью познать азов javascript-а.
Но так как сценарий на данном языке пишу впервые, возникло масса вопросов. Ниже, привожу исходник, прошу указать на недочёты которые допустил в данном коде.
<html>
<!-- этот файл обсуждаем. -->
<script type="text/javascript" src="js/Scrolling.js"></script>
<!-- отладочный стиль. -->
<style>
.scrolling_scv
{
background:#333;
border-radius:5px;
width:10px;
height:30px;
position:absolute;
cursor:default;
-webkit-user-select:none;
}
.background_scv
{
background:#999;
border-radius:5px;
width:10px;
height:100%;
-webkit-user-select:none;
}
</style>
<!-- не обращаем внимание, на коленке писал. -->
<script>
$("debug").appendChild(new STScrolling("debug", function (i) { $("output").innerHTML = i; } ));
function $(id) { return document.getElementById(id); }
</script>
<body>
<!-- отладочные div-ы -->
<div align="center" id="debug" style="height:300px;"></div>
<div align="center" id="output">0</div>
</body>
</html>
код который обсуждаем.
var STScrolling = function(id, fun)
{
// айди новых объектов.
var bgId = "bg_" + id;
var scId = "sc_" + id;
// выполняет функцию при анимации элемента.
var out = fun;
// запоминаем позицию курсора на элементе.
var lp;
// новое положение элемента.
var ep;
// дистанция, в доль которой может двигаться элемент.
var ds;
// выводит положение элемента в процентах.
var sp;
// динамический элемент.
var sc = d(scId, "scrolling_scv");
sc.addEventListener("mousedown", onMouseDown);
// бакгроунд под элементом.
var bg = d(bgId, "background_scv");
bg.appendChild(sc);
// кликаем по элементу.
function onMouseDown (e)
{
// вычисляем дистанцию.
ds = bg.offsetHeight - sc.offsetHeight;
// определяем шаг элемента в процентах.
sp = 1 / ds;
// запоминаем где кликнул курсор на элементе.
lp = bg.offsetTop + e.layerY;
// регистрируем приёмники.
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
}
// отжимаем кнопку мыши.
function onMouseUp (e)
{
// удаляем приёмники.
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
}
// двигаем мышью.
function onMouseMove (e)
{
// вычисляем новое положение элемента.
ep = e.clientY - lp;
// проверяем положение элемента.
if (ep > ds) ep = ds;
else if (ep < 0) ep = 0;
// двигаем элемент.
sc.style.top = bg.offsetTop + ep + "px";
// если переменная не пуста, выполняем метод.
if (out != null) out(parseInt(ep * sp * 100));
}
// создаём нужные div элементы.
function d(id, cn)
{
var n = document.createElement("div");
n.id = id;
n.className = cn;
return n;
}
// возвращаем объект.
return bg;
}
Из недостатков с которыми уже столкнулся:
Если страница документа прокручивается, позиция курсора нарушается. Я так понял что "e.layerY" отсчитывает позицию не от начала документа а от начала видимой области т.е. окна браузера. Думаю что это решаемо, просто пока не знаю как.
Продолжаем критиковать и предлагаем свои варианты, решения!
Заранее благодарю за понимание.
