基于鼠标位置的平滑滚动 (Jquery) [英] Smooth scroller based on mouse position (Jquery)

问题描述

嗨！

我想根据鼠标位置创建一个平滑的滚动条.这个想法是创建一个具有固定宽度的外部 div.内容非常宽，必须根据鼠标位置向左或向右滚动.如果内容是无限的"或无尽的"，那就太好了.内容是一个非常广泛的图像，重复无缝".

任何人都可以通过在 jQuery 中创建它来帮助我吗?

提前谢谢！

亚历克斯

解决方案

您可以将图像设置为 div 的背景，并使用 jquery 为 background-position 设置动画.(因为它让我感兴趣，所以这是一个实现)

演示 http://jsfiddle.net/gaby/72yhW/

html

<div class="向左方向"></div><div class="正确的方向"></div>

css

.backdrop{位置:相对；高度:300px；/*真的可以是任何东西..*/宽度:400px；/*真的可以是任何东西..*/边框:3px 实心 #6699ff;背景: url('你的图像路径在这里') 0 0 repeat-x;}.方向{位置:绝对；宽度:50%；高度:100%；}.left{left:0;top:0;}.right{right:0;top:0;}

jquery

$(function(){变量 x=0,y=0,率=0，最大速度=10；var 背景 = $('.backdrop');$('.direction', 背景).mousemove(function(e){var $this = $(this);var left = $this.is('.left');如果(左){var w = $this.width();rate = (w - e.pageX - $(this).offset().left + 1)/w;}别的{var w = $this.width();rate = -(e.pageX - $(this).offset().left + 1)/w;}});背景.悬停(功能(){var scroller = setInterval( moveBackdrop, 10 );$(this).data('scroller', scroller);},功能(){var scroller = $(this).data('scroller');clearInterval(滚动条)；});函数 moveBackdrop(){x += 最大速度 * 速率；var newpos = x+'px'+y+'px';background.css('背景位置',newpos);}});

HI!

I would like to create a Smooth scroller based on mouse position. The idea is to create a outer div with a fixed width. The content is very wide and has to be scrolled to left or right, based on the mouse position. It would be great if the content is 'infinite' or 'endless'. The content is a very wide image that repeats 'seamelesly'.

Can anybody help me by creating this in jQuery?

Thanx in advance!

Alex

解决方案

You can set the image as the background of the div and animate the background-position with jquery. (and because it got me interested, here is an implementation)

demo http://jsfiddle.net/gaby/72yhW/

html

<div class="backdrop">
    <div class="direction left"></div>
    <div class="direction right"></div>
</div>

css

.backdrop{
    position:relative;
    height:300px; /*could be anything really..*/
    width:400px; /*could be anything really..*/
    border:3px solid #6699ff;
    background: url('YOUR IMAGE PATH GOES HERE') 0 0 repeat-x;
}

.direction{
    position:absolute;
    width:50%;
    height:100%;
}
.left{left:0;top:0;}
.right{right:0;top:0;}

jquery

$(function(){
    var x=0,
        y=0,
        rate=0,
        maxspeed=10;
    var backdrop = $('.backdrop');

    $('.direction', backdrop).mousemove(function(e){
        var $this = $(this);
        var left = $this.is('.left');

        if (left){
            var w = $this.width();
            rate = (w - e.pageX - $(this).offset().left + 1)/w;
        }
        else{
            var w = $this.width();
            rate = -(e.pageX - $(this).offset().left + 1)/w;
        }
    });

    backdrop.hover(
        function(){
            var scroller = setInterval( moveBackdrop, 10 );
            $(this).data('scroller', scroller);
        },
        function(){
            var scroller = $(this).data('scroller');
            clearInterval( scroller );
        }
    );   

    function moveBackdrop(){
        x += maxspeed * rate;
        var newpos = x+'px '+y+'px';
        backdrop.css('background-position',newpos);
    }
});

这篇关于基于鼠标位置的平滑滚动 (Jquery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！