<h2>下面是向上滚动</h2>
<div id="colee" style="overflow: hidden; height: 200px; width: 600px; margin-left: 300px;">
<div id="colee1">
<p><img src="Image/1.png"></p>
<p><img src="Image/2.png"></p>
<p><img src="Image/3.png"></p>
<p><img src="Image/4.png"></p>
</div>
<div id="colee2"></div>
</div>
<script>
var speed = 10;//设置的数字越大 滚动的越慢
var colee2 = document.getElementById("colee2");
var colee1 = document.getElementById("colee1");
var colee = document.getElementById("colee");
colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
function Marquee1() {
//当滚动至colee1与colee2交界时
if (colee2.offsetTop - colee.scrollTop <= 0) {
colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
} else {
colee.scrollTop++;
}
}
var MyMar1 = setInterval(Marquee1, speed); //设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover = function () { clearInterval(MyMar1) }
//鼠标移开时重设定时器
colee.onmouseout = function () { MyMar1 = setInterval(Marquee1, speed) }
</script>
<!--向上滚动代码结束-->
<br>
<h2>下面是向下滚动</h2>
<div id="colee_bottom" style="overflow: hidden; height: 200px; width: 600px; margin-left: 300px;">
<div id="colee_bottom1">
<p><img src="Image/1.png"></p>
<p><img src="Image/2.png"></p>
<p><img src="Image/3.png"></p>
<p><img src="Image/4.png"></p>
</div>
<div id="colee_bottom2"></div>
</div>
<script>
var speed = 30;//这里设置为30 与上面对比
var colee_bottom2 = document.getElementById("colee_bottom2");
var colee_bottom1 = document.getElementById("colee_bottom1");
var colee_bottom = document.getElementById("colee_bottom");
colee_bottom2.innerHTML = colee_bottom1.innerHTML;
colee_bottom.scrollTop = colee_bottom.scrollHeight;
function Marquee2() {
if (colee_bottom1.offsetTop - colee_bottom.scrollTop >= 0)
colee_bottom.scrollTop += colee_bottom2.offsetHeight;
else {
colee_bottom.scrollTop--;
}
}
var MyMar2 = setInterval(Marquee2, speed);
colee_bottom.onmouseover = function() { clearInterval(MyMar2) }
colee_bottom.onmouseout = function() { MyMar2 = setInterval(Marquee2, speed) }
</script>
转载请注明原文地址: https://ju.6miu.com/read-1299582.html
