JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)

好嘞，下面就来详细讲解一下“JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)”的完整攻略。

首先，我们先分析一下需要实现的效果。该效果要求实现的是一个可以上下左右无缝滚动的图像效果，并且设置定高、定宽以及停顿等效果，最重要的是要兼容ie和ff两种浏览器。

为了达到这个效果，我们可以采用一些主要的方法和技巧：

1. CSS属性设置

首先，我们可以通过CSS来设置图片的样式。例如，设置图片高度和宽度并清除浮动，如下：

img {
  width: 220px;
  height: 100px;
  float: left;
}

通过上述设置，我们将图片设置为定高、定宽、左浮动的效果，便利于我们后续实现JavaScript效果。

2. JavaScript实现

为了实现无缝上下左右滚动、定高、定宽以及停顿等效果，我们需要通过JavaScript来编写的代码实现。以下是一些主要的JavaScript代码实现：

2.1 上下无缝滚动

var div = document.getElementById("divContent");
var speed = 50;
var timer;

div2.innerHTML = div1.innerHTML; // 复制一个完全相同的内容

function MarqueeUp() {
    if(div2.offsetTop - div.scrollTop <= 0)
        div.scrollTop -= div1.offsetHeight;
    else {
        div.scrollTop++;
    }
}
timer = setInterval(MarqueeUp, speed);

上述代码实现的是一个上下滚动的效果。首先，我们获取到内容div、设置滚动速度，并初始化定时器。接着，我们将内容div的内容复制一份，以备需要无缝滚动。最后，在定时器里面，我们通过计算元素的offsetTop属性以及scrollTop属性，来实现上下滚动切换并产生无缝滚动的效果。

2.2 左右无缝滚动

var div = document.getElementById("divContent");
var childDiv1 = document.getElementById("childDiv1");
var childDiv2 = document.getElementById("childDiv2");

function scrollLeft() {
    if(div.scrollLeft >= childDiv1.scrollWidth) {
        div.scrollLeft = 0;
    } else {
        div.scrollLeft++;
    }
}
var timer = setInterval(scrollLeft, 20);

上述代码实现的是一个左右滚动的效果。我们首先获取到要滚动的内容div，以及内容div中的子元素childDiv1和childDiv2等元素。然后，通过计算元素的scrollWidth属性以及scrollLeft属性，来实现左右滚动切换并产生无缝滚动的效果。

3. 示例说明

假设我们现在有一个含有3张图片的div，且每个图片的高度和宽度都是220px和100px。我们现在需要实现该图片向下无缝滚动的效果，并且能够在滚动停顿一段时间之后继续滚动。

可以参考下面的代码实现：

HTML代码：

<div id="divContent" style="height: 220px; overflow: hidden;">
  <div>
    <img src="1.jpg"/>
  </div>
  <div>
    <img src="2.jpg"/>
  </div>
  <div>
    <img src="3.jpg"/>
  </div>
</div>

JavaScript代码：

var div = document.getElementById("divContent");
var speed = 50;
var timer;
var delay = 1000; // 暂停1秒

div.innerHTML += div.innerHTML;

function startScroll() {
    timer = setInterval(scrollUp, speed);
    div.scrollTop = 0;
}

function pauseScroll() {
    clearInterval(timer);
    setTimeout(function() {
        timer = setInterval(scrollUp, speed);
    }, delay);
}

function scrollUp() {
    if(div.scrollTop % div.clientHeight == 0) {
        clearInterval(timer);
        setTimeout(function() {
            startScroll();
        }, delay);
    } else {
        div.scrollTop++;
        if(div.scrollTop >= div.scrollHeight / 2) {
            div.scrollTop = 0;
        }
    }
}

startScroll();
div.onmouseover = function() { pauseScroll(); };
div.onmouseout = function() { startScroll(); };

上述代码实现了下无缝滚动且停顿之后继续滚动的效果。首先，我们获取到内容div、设置滚动速度和停顿时间，并初始化定时器与内容div的scrollTop属性。接着，我们复制了一个完全相同的div内容，并通过滚动scrollTop属性、停顿setTimeout方法等方法来实现无缝滚动效果。最后，在实现暂停和继续滚动的效果中，我们通过鼠标事件来控制定时器和滚动效果的实现。

另外一个示例说明是左右无缝滚动的效果。以下是一个示例说明：

HTML代码：

<div id="divContent" style="width: 660px; overflow: hidden;">
  <div id="childDiv1">
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
  </div>
  <div id="childDiv2"></div>
</div>

JavaScript代码：

var div = document.getElementById("divContent");
var childDiv1 = document.getElementById("childDiv1");
var childDiv2 = document.getElementById("childDiv2");

childDiv2.innerHTML = childDiv1.innerHTML;

function scrollLeft() {
    if(div.scrollLeft >= childDiv1.scrollWidth) {
        div.scrollLeft = 0;
    } else {
        div.scrollLeft++;
    }
}
var timer = setInterval(scrollLeft, 5);

上述代码实现了一个左右无缝滚动效果。我们首先获取到要滚动的内容div，以及内容div中的子元素childDiv1和childDiv2等元素。然后，通过计算元素的scrollWidth属性以及scrollLeft属性，来实现左右滚动切换并产生无缝滚动的效果。

好了，以上就是实现JavaScript 无缝上下左右滚动加定高定宽停顿效果(兼容ie/ff)的完整攻略了，希望对你有所帮助。