我正在使用一些JavaScript和jQuery(使用缓动插件)来创建虚拟游览; 真的只是一个可以左右平移的长图像。 我发现这是完美的事业: http//jsfiddle.net/MvRdD/1/ 有没有办法为动画添加缓动?

#1楼 票数:2 已采纳

http://jsfiddle.net/ARTsinn/MvRdD/890/

$(document).ready(function() {
    $.getScript("https://raw.github.com/danro/easing-js/master/easing.min.js");
    var animateTime = 10,
        offsetStep = 5,
        scrollWrapper = $('#wrap');

    //event handling for buttons "left", "right"
    var aktiv;
    $('.bttL, .bttR').mousedown(function(e) {
        if (e.target.className === 'bttR') {
            aktiv = window.setInterval(function() {
                scrollWrapper.animate({
                    scrollLeft: '+=' + 20
                }, {
                    duration: 600,
                    queue: false,
                    easing: 'easeOutCirc'
                });
            }, 10);
        } else if (e.target.className === 'bttL') {
            aktiv = window.setInterval(function() {

                scrollWrapper.animate({
                    scrollLeft: '-=' + 20
                }, {
                    duration: 1200,
                    queue: false,
                    easing: 'easeOutCirc'
                });
            }, 10);

        }
    }).mouseup(function() {
        window.clearInterval(aktiv);
    });


    scrollWrapper.mousedown(function(event) {
        $(this).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
        return false;
    }).mouseup(function(event) {
        $(this).data('down', false);
    }).mousemove(function(event) {
        if ($(this).data('down')) {
            $(this).stop(false, true).animate({
                scrollLeft: $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2
            }, {
                duration: 600,
                queue: false,
                easing: 'easeOutCirc'
            });
        }
    }).mousewheel(function(event, delta) {
        $(this).stop(false, true).animate({
            scrollLeft: '-=' + delta * 60
        }, {
            duration: 400,
            queue: false,
            easing: 'easeOutCirc'
        });
        event.preventDefault();
    }).css({
        'overflow': 'hidden',
        'cursor': '-moz-grab'
    });
});

  ask by legoman translate from so

未解决问题?本站智能推荐:

2回复

使用jQuery添加缓动效果

当使用jQuery显示时,我需要为.dropdown div添加一个缓动效果,但我也很乐意用CSS做到这一点。 有任何想法吗? 提前致谢 :) $('.btn').bind('click', function (){ $(this).parent().next('.dropdown'
3回复

如何调整此代码以添加缓动鼠标移动?

我试图在我的网站上为自定义光标添加缓动,但在尝试了一些事情后我没有运气。 如果有人知道如何调整以下代码以启用此功能,那将非常有用,因为我已经坚持了几个小时! 我正在阅读有关使用 lerp 实现此目的的信息, 请参阅此 Codepen ,但无法成功提取代码。 jQuery(document).
1回复

在图像上实现平移窗口?

我正在尝试实现一种效果,即在背景图像上有一个移动/动画窗口,使您一次只能看到图像的特定部分。 实际上,窗口本身不应该移动,因为它将是位于页面某处的div-但效果应该是背景向后移动。 但是,背景不应占用DOM上的任何空间(即,它不应影响其周围的任何元素)。 实现此目的的最佳方法是什么?
1回复

向鼠标效果平移图像

如何对在此网站http://www.madwell.com/上看到的效果进行编程,在这些位置上图像会沿鼠标方向稍微移动?
1回复

如何使用jQuery缓动为动画重置图像的边距?

我正在尝试使用jquery缓动(请参阅http://gsgd.co.uk/sandbox/jquery/easing/ )对图像进行动画处理,这将允许图像在单击链接时从右向左飞行(“费率”以防万一)。 问题是,我无法重置图像的左边距,因此,如果我多次敲击,每次单击速率时图像都会移动。 我尝试
1回复

滚动时水平移动图像,然后停止

我可以很容易地垂直移动图像,但是如何使用我的方法水平移动它? 一旦我到达某一点,我也希望图像停止向那个方向移动,我不知道该怎么做,也许我可以改变它的css,一旦我得到这么多的像素就保持在一个位置。 下面的代码垂直移动它,我可以使用类似的简单方法水平移动图像吗? 码:
2回复

图像鼠标悬停平移方程?

我有一个简单的jQ脚本: 设置的宽度/高度容器 风景img(可以大于或小于容器) 当用户将鼠标悬停在图像上时,它会平移(无单击/拖动),直到到达末尾 将img向左移动的方程式是:-1(相对鼠标位置)*(img宽度)/(容器宽度) 这可以很好地工作,但是鼠标到img的末尾
3回复

将图像拖动到文本区域时,将图像alt值添加到鼠标的位置

我有一个文本区域,用户可以在我的网站上填写。 这是我想做的一个例子: 用户在此文本区域中评论他人的帖子时,将在顶部选择一组表情符号图片。 我希望用户单击要选择的表情符号(然后在其周围出现边框),然后用户可以在希望粘贴文本的文本区域中单击一次。 该文本将来自图片的alt属性。 这样可以