Question

我想根据鼠标光标移动滚动HTML页面，这样当鼠标光标向任何方向（X＆amp; Y）移动时，页面的滚动条随之移动，滚动页面。我还希望滚动条有一个缓动，这样在移动鼠标时会有轻微的延迟。

我有一个工作原型（没有缓和）： https://jsfiddle.net/ssq7cda4/12/

$(document).mousemove(function (e) {
    var winW = $(window).width(),
        docW = $(this).width() - winW,
        i = docW / winW, //increment value
        x = (e.pageX - $(window).scrollLeft()) * i;

    //$(window).scrollLeft(x);
    //$("html, body").animate({scrollLeft:x}, 500, 'swing');
    $("html, body").scrollLeft(x);
});

$(document).mousemove(function (e) {
    var winW = $(window).height(),
        docW = $(this).height() - winW,
        i = docW / winW, //increment value
        x = (e.pageY - $(window).scrollTop()) * i;

    //$("html, body").animate({scrollTop:x}, 500, 'swing');
    $(window).scrollTop(x);
});

唯一的问题是我没有找到一种方法将缓动添加到滚动。使用.animate使得滚动锯齿和怪异。我应该如何基于鼠标移动使用缓动来设置滚动动画？

Answer 1

这不适合你吗？

＆＃13;

var win=$(window),doc=$(document);
var winWidth=win.width(),winHeight=win.height();
var docWidth=doc.width()-winWidth,docHeight=doc.height()-winHeight;
var increment=0,x=0,y=0;
doc.on('mousemove',function(e){
    increment=docWidth/winWidth;
    x=(e.pageX-win.scrollLeft())*increment;
    increment=docHeight/winHeight;
    y=(e.pageY-win.scrollTop())*increment;
    $('html,body').stop().animate({scrollLeft:x,scrollTop:y});
});

＆＃13;

#canvas { width: 3000px; height: 2000px; background: #ededed; }

.content {
    position: absolute;
    border: 3px solid pink;
    width: 300px;
    height: 300px;
    padding: 30px;
}

#island1 { top: 200px; left: 400px; }
#island2 { top: 300px; left: 1700px; }
#island3 { top: 700px; left: 1400px; }
#island4 { top: 1200px; left: 1900px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas">    
    <div class="content" id="island1"><p>Hello world!</p></div>
    <div class="content" id="island2"><p>Hello world!</p></div>
    <div class="content" id="island3"><p>Hello world!</p></div>
    <div class="content" id="island4"><p>Hello world!</p></div>
</div>

＆＃13;

希望它在某种程度上有所帮助。

<强>更新

试试这个：

＆＃13;

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

var win=$(window),doc=$(document),canvas=$('#canvas');
var winWidth=win.width(),winHeight=win.height();
var docWidth=doc.width()-winWidth,docHeight=doc.height()-winHeight;
var increment=0,x=0,y=0,mouseX=0,mouseY=0,damping=10;

requestAnimFrame(render);

doc.on('mousemove',function(e){
    // see [http://stackoverflow.com/a/23202637/3344111]
    mouseX=e.pageX*(canvas.width()-winWidth)/winWidth;
    mouseY=e.pageY*(canvas.height()-winHeight)/winHeight;
});

function render(){
    requestAnimFrame(render);
    // see [http://stackoverflow.com/a/4847893] & [http://stackoverflow.com/a/4315833]
    x+=(-mouseX-x)/damping;
    y+=(-mouseY-y)/damping;
    canvas.css({'-webkit-transform':'translate('+x+'px,'+y+'px)'});
}

＆＃13;

#canvas { width: 3000px; height: 2000px; background: #ededed; }

.content {
    position: absolute;
    border: 3px solid pink;
    width: 300px;
    height: 300px;
    padding: 30px;
}

#island1 { top: 200px; left: 400px; }
#island2 { top: 300px; left: 1700px; }
#island3 { top: 700px; left: 1400px; }
#island4 { top: 1200px; left: 1900px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="canvas">    
    <div class="content" id="island1"><p>island1</p></div>
    <div class="content" id="island2"><p>island2</p></div>
    <div class="content" id="island3"><p>island3</p></div>
    <div class="content" id="island4"><p>island4</p></div>
</div>

＆＃13;

有用吗？

动画scrollLeft＆amp; mouseTove上的scrollTop

1 个答案: