读书人

两行滚动鼠标放上去不能停止滚动的有

发布时间: 2014-01-12 00:03:16 作者: rapoo

两行滚动,鼠标放上去不能停止滚动的问题


<div id="demo">

<div id="indemo">
<div id="demo1">
<ul>
<li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/3.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称1</a></span></li>
<li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/4.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称2</a></span></li>
<li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/1.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称3</a></span></li>
<li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/2.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称4</a></span></li>
<li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/3.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称5</a></span></li>
<li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/4.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称6</a></span></li>
</ul>
</div>
<div id="demo2"></div>
</div>


<div id="indemo">
<div id="demo3">
<ul>
<li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/3.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称7</a></span></li>
<li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/4.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称8</a></span></li>
<li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/1.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称9</a></span></li>
<li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/2.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称10</a></span></li>
<li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/3.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称11</a></span></li>
<li><span class="CSSPRE_sp3"><a href=""><img src="images/pic/4.jpg" onload="resize(this,194,162)" /></a></span><span class="CSSPRE_sp2"><a href="">产品名称12</a></span></li>
</ul>
</div>
<div id="demo4"></div>
</div>



</div>

<script>
var speed1 = 30;
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;


function Marquee1() {
if (tab2.offsetWidth - tab.scrollLeft <= 0)
{
tab.scrollLeft -= tab1.offsetWidth
}
else {
tab.scrollLeft += 1;
}
}

var MyMar1 = setInterval(Marquee1, speed1);
tab.onmouseover = function() {
clearInterval(MyMar1);
};
tab.onmouseout = function() {
MyMar1 = setInterval(Marquee1, speed1);
};
</script>


<script>
var speed2 = 30;
var taby = document.getElementById("demo");
var tab3 = document.getElementById("demo3");
var tab4 = document.getElementById("demo4");
tab4.innerHTML = tab3.innerHTML;

function Marquee2() {
if (tab4.offsetWidth - taby.scrollLeft <= 0) taby.scrollLeft -= tab3.offsetWidth
else {
taby.scrollLeft++;
}
}
var MyMar2 = setInterval(Marquee2, speed2);
taby.onmouseover = function() {
clearInterval(MyMar2)
};
taby.onmouseout = function() {
MyMar2 = setInterval(Marquee2, speed2)
};
</script>


两行滚动,鼠标放上去不能停止滚动的有关问题 请大家帮忙看看,两行滚动的话,鼠标放上去不能停止滚动,可能是什么原因?
[解决办法]
你这个能停止一个计时器吧?
你为ID为demo的元素两次添加onmouseover事件
第二次会覆盖第一次,你可以把停止两个计时器的代码写在一个事件里
[解决办法]
给你一个js插件 js文字无缝左右滚动,可添加多个DIV
[解决办法]
你的tab和taby指的是同一个,为他们添加的不同的onmouseover事件,他只会执行最后的那个
你可以为你的id为indemo的这个div添加onmouseover事件,不过这两个div的id需要更改一下,改成indemo1和indemo2.即不能重复,现在只需要分别赋上事件就行了

var d1 = document.getElementById('indemo1');
d1.onmouseover = function() {
clearInterval(MyMar1);
};
d1.onmouseout = function() {
MyMar1 = setInterval(Marquee1, speed1);
};
var d2 = document.getElementById('indemo2');
d2.onmouseover = function() {
clearInterval(MyMar1);
};
d2.onmouseout = function() {
MyMar1 = setInterval(Marquee1, speed1);
};

读书人网 >JavaScript

热点推荐