Fatal编程技术网
  • javascript/
  • Javascript 无限滚动div与图像不匹配

Javascript 无限滚动div与图像不匹配

javascript jquery

Javascript 无限滚动div与图像不匹配,javascript,jquery,jquery-animate,Javascript,Jquery,Jquery Animate,我目前正在使用以下javascript，如下所示。 当我只在div.image_scroll_3中放置文本时，它工作得很好，但一旦插入图像，滚动就会出现小故障，不会移动到图像的顶部 任何建议都将不胜感激 JS （函数（$，未定义）{ $.fn.loopScroll=函数（p_选项）{ 变量选项=$.extend({ 方向：“向上”， 速度：60 }，p_选项）； 返回此值。每个（函数（）{ var obj=$（this.find（“.image\u scroll\u 2”）； var text

我目前正在使用以下javascript，如下所示。 当我只在div.image_scroll_3中放置文本时，它工作得很好，但一旦插入图像，滚动就会出现小故障，不会移动到图像的顶部

任何建议都将不胜感激

JS


（函数（$，未定义）{
$.fn.loopScroll=函数（p_选项）{
变量选项=$.extend({
方向：“向上”，
速度：60
}，p_选项）；
返回此值。每个（函数（）{
var obj=$（this.find（“.image\u scroll\u 2”）；
var text_height=obj.find（“.image_scroll_3”）.height（）；
变量开始，结束；
如果（options.direction==“向下”）{
起点y=-文本高度；
end_y=0；
}否则如果（options.direction==“向上”）{
起始值y=0；
end_y=-文本高度；
}
var animate=函数（）{
//设置指定块“obj”的动画
//计算动画的距离
var distance=Math.abs（end_y-parseInt（obj.css（“top”）））；
//警报（“动画”+obj.css（“顶部”）+“->”+end_y+”+距离）；
//持续时间为距离/速度
对象动画(
{top:end_y}，//向上滚动
1500*距离/选项。速度，
“线性”，
函数（）{
//滚动至开始位置
对象css（“顶部”，开始）；
制作动画（）；
}
);
};
obj.find（“.image\u scroll\u 3”）.clone（）.appendTo（obj）；
$（this）.on（“mouseout”，function（））{
obj.stop（）；
}).on（“mouseout”，函数（）{
动画（）；//恢复动画
});
对象css（“顶部”，开始）；
动画（）；//开始动画
});
};
}（jQuery））；
$（“#示例4”）.loopScroll（{speed:700}）；
我认为问题在于，您的
文本高度是在图像实际加载到
元素中之前计算出来的。因此，您需要等待图像加载

将您的
loopScroll
调用放入
$（窗口）中。按如下方式加载：


$(window).load(function(){
    $('#example4').loopScroll({speed:700});
});


这一巨大的故障现在应该消失了，因为上面的修复应该有助于缓解它

然而，如果您注意到，在所有图像的移动中仍然存在一些不必要的jank/stutter（不想再次使用glitch这个词，让我们保留它用于初始问题），我猜这可能是因为我们将整个事情设置为动画太快了。通过像
100
或
200
这样的速度传递可以解决这一问题，但这并不是一个真正的解决方案，因为理想情况下，您应该能够输入任何速度值，并且它应该只生成平滑的动画

我正在做完全相同的事情，但在此之前，我想知道上述故障修复是否对您有帮助，我们最终解决了它？让我知道

更新：

这是我早些时候提到的，供大家阅读

因为您所要做的只是以非常线性的方式循环图像，所以我不认为需要依赖jQuery的
animate（）
函数。我使用了
requestAnimationFrame
API。事实上，在我下面的演示中，我完全放弃了jQuery，而选择了vanilla JavaScript，只是因为我一直在寻找替代方案，以替代我们在这个演示中需要做的几乎所有事情。当然，这也是一个非常主观的问题；有品味的东西；因此，如果您想使用jQuery，那么请尽一切努力

我带来的另一个根本性变化不是更新
top
值，而是更新
translateY
值

看看这个，让我知道它是否适合你的需要

其中JavaScript代码如下：


// [http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/]
window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};})();
var main=null;
var imageScroll2=null;
var imageScroll3=null;
var totalHeight=null;
var initY=null;
var destY=null;
var currY=null;
var increment=null;
var direction=null;
var UP=null;
var DOWN=null;
var isPlaying=null;
function init(){
    main=document.getElementById('example4');
    imageScroll2=main.getElementsByClassName('image_scroll_2')[0];
    imageScroll3=main.getElementsByClassName('image_scroll_3')[0];
    totalHeight=imageScroll3.clientHeight;
    UP='upwards';
    DOWN='downwards';
    isPlaying=true;
    direction=UP;
    increment=10;
    if(direction===DOWN){
        initY= -totalHeight;
        destY=0;
    }else{
        initY=0;
        destY= -totalHeight;
    }
    currY=initY;
    imageScroll2.appendChild(imageScroll3.cloneNode(true));
    if(imageScroll2.addEventListener){
        imageScroll2.addEventListener('mouseover',function(){isPlaying=false;},false);
        imageScroll2.addEventListener('mouseout',function(){isPlaying=true;},false);
    }else{
        imageScroll2.attachEvent('onmouseover',function(){isPlaying=false;});
        imageScroll2.attachEvent('onmouseout',function(){isPlaying=true;});
    }
    requestAnimFrame(render);
}
function render(){
    if(isPlaying){
        imageScroll2.style.transform='translate(0px,'+currY+'px)';
        if(direction===DOWN){
            currY+=increment;
            if(currY>=destY){currY=initY;}
        }else{
            currY-=increment;
            if(currY<=destY){currY=initY;}
        }
    }
    requestAnimFrame(render);
}
//
init();



//[http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/]
window.requestAnimFrame=（function（）{return window.requestAnimationFrame | | | window.webkitRequestAnimationFrame | | | window.mozRequestAnimationFrame | | function（callback）{window.setTimeout（callback，1000/60）；}；（）；
var main=null；
var-imageScroll2=null；
var-imageScroll3=null；
var totalHeight=null；
var=null；
var destY=null；
var currY=null；
var增量=null；
var方向=null；
var UP=null；
var-DOWN=null；
var isplay=null；
函数init（）{
main=document.getElementById（'example4'）；
imageScroll2=main.getElementsByClassName（'image_scroll_2'）[0]；
imageScroll3=main.getElementsByClassName（'image_scroll_3'）[0]；
totalHeight=imageScroll3.clientHeight；
“向上”；
向下“=”向下“；
isplay=true；
方向=向上；
增量=10；
如果（方向===向下）{
initY=-总高度；
destY=0；
}否则{
初始值=0；
destY=-总高度；
}
咖喱=；
imageScroll2.appendChild（imageScroll3.cloneNode（true））；
if（imageScroll2.addEventListener）{
imageScroll2.addEventListener（'mouseover'，function（）{isplay=false；}，false）；
imageScroll2.addEventListener（'mouseout'，function（）{isplay=true；}，false）；
}否则{
imageScroll2.attachEvent（'onmouseover'，function（）{isplay=false；}）；
imageScroll2.attachEvent（'onmouseout'，function（）{isPlaying=true；}）；
}
请求帧（渲染）；
}
函数render（）{
如果（显示）{
imageScroll2.style.transform='translate（0px，'+currY+'px'）；
如果（方向===向下）{
咖喱+=增量；
如果（currY>=destY）{currY=initY；}
}否则{
咖喱-=增量；

如果（你能做一把小提琴吗？很难想象，如果没有实际的操作，问题会是什么。@TahirAhmed不用担心，这是一个小问题，这个小问题是相当不明显的，你不觉得吗？有什么特别的环境/设置使它看起来更突出吗？@TahirAhmed我不确定，这是一个关于WebGeon的实时版本的例子在这个网站上，似乎拥有一个
700
的持续时间太快了，因为图像的高度和总数使得
.image\u scroll\u 2
元素的动画看起来太快了

// [http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/]
window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};})();
var main=null;
var imageScroll2=null;
var imageScroll3=null;
var totalHeight=null;
var initY=null;
var destY=null;
var currY=null;
var increment=null;
var direction=null;
var UP=null;
var DOWN=null;
var isPlaying=null;
function init(){
    main=document.getElementById('example4');
    imageScroll2=main.getElementsByClassName('image_scroll_2')[0];
    imageScroll3=main.getElementsByClassName('image_scroll_3')[0];
    totalHeight=imageScroll3.clientHeight;
    UP='upwards';
    DOWN='downwards';
    isPlaying=true;
    direction=UP;
    increment=10;
    if(direction===DOWN){
        initY= -totalHeight;
        destY=0;
    }else{
        initY=0;
        destY= -totalHeight;
    }
    currY=initY;
    imageScroll2.appendChild(imageScroll3.cloneNode(true));
    if(imageScroll2.addEventListener){
        imageScroll2.addEventListener('mouseover',function(){isPlaying=false;},false);
        imageScroll2.addEventListener('mouseout',function(){isPlaying=true;},false);
    }else{
        imageScroll2.attachEvent('onmouseover',function(){isPlaying=false;});
        imageScroll2.attachEvent('onmouseout',function(){isPlaying=true;});
    }
    requestAnimFrame(render);
}
function render(){
    if(isPlaying){
        imageScroll2.style.transform='translate(0px,'+currY+'px)';
        if(direction===DOWN){
            currY+=increment;
            if(currY>=destY){currY=initY;}
        }else{
            currY-=increment;
            if(currY<=destY){currY=initY;}
        }
    }
    requestAnimFrame(render);
}
//
init();