Amazon Cloud Reader like Text Highlighting

by codef0rmer

HTML

<span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span><span>Lorem</span><span> Ipsum </span>

CSS

.mouseOn{
  background-color: #bcd5eb !important;
}
body {
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  margin: 0;
  padding: 0;
  font-family: "heinemann_roman";
}

JavaScript

$(function() {
    var mouseDown = false, prevPageX = 0;
    document.addEventListener('mousedown', function() { mouseDown = true; });
    document.addEventListener('mouseup', function() { mouseDown = false; });
    document.addEventListener('mousemove',
        function(e){
            var elem = e.target || e.srcElement;
            if (!mouseDown || elem.tagName.toLowerCase() == "html" || elem.tagName.toLowerCase() == "body") return false;
            console.log($(elem).prevAll('.mouseOn:last').length);
            if (prevPageX > e.pageX) {
                elem.classList.remove("mouseOn");            
            } else {
                elem.classList.add("mouseOn");                
            }
            prevPageX = e.pageX;            
        },true);
});