不间断每次滚动一条数据JS特效制作

栏目：JS建站代码，jQuery网站特效代码浏览：21,719

有些网站上会出现一些展示栏，它是不间断的向上滚动，而且每次滚动一条数据，当光标指向这个区域时，又会停止滚动。效果图如下：不间断每次滚动一条数据JS特效制作

制作不间断每次向上滚动一条数据滚动特效的步骤：

在网站上需要显示向上滚动数据效果的位置，放上以下的代码（可以根据自己需要增加数据的数量，就是复制更多的LI标签）：
<div>
<div id="mq" onmouseover=iScrollAmount=0 style="OVERFLOW: hidden; WIDTH:199px; margin:0 auto; HEIGHT:500px;" onmouseout=iScrollAmount=1>
<ul>
<li>
<div>
<div><span><nobr><a href="https://www.xuewangzhan.net/">自己建网站</a></nobr></span><em>购买了</em></div>
<div>09-01 08:10</div>
</div>
<div><nobr>统一阿萨姆 500ml/瓶x1 咪咪虾味</nobr></div>
</li>
<li>
<div>
<div><span><nobr><a href="https://www.xuewangzhan.net/jz/html5/">html</a></nobr></span><em>购买了</em></div>
<div>09-01 08:10</div>
</div>
<div><nobr>统一阿萨姆 500ml/瓶x1 咪咪虾味</nobr></div>
</li> <li>
<div>
<div><span><nobr>懒懒de小熊</nobr></span><em>购买了</em></div>
<div>09-01 08:10</div>
</div>
<div><nobr>统一阿萨姆 500ml/瓶x1 咪咪虾味</nobr></div>
</li>
</ul>
</div>
</div>
<script src="/muqruujs.js" type="text/javascript"></script>
新建一个JS文件，取名为muqruujs.js，然后将下面的jQuery特效代码复制放入这个JS文件中并保存，保存后上传到自己网站的根目录下。
var oMarquee = document.getElementById("mq"); //滚动对象
var iLineHeight = 60; //单行高度，像素
var iLineCount = 9; //实际行数
var iScrollAmount = 2; //每次滚动高度，像素
function run() { oMarquee.scrollTop += iScrollAmount; if ( oMarquee.scrollTop == iLineCount * iLineHeight ) oMarquee.scrollTop = 0; if ( oMarquee.scrollTop % iLineHeight == 0 ) { window.setTimeout( "run()", 2500 ); } else { window.setTimeout( "run()", 10 ); } } oMarquee.innerHTML += oMarquee.innerHTML; window.setTimeout( "run()", 2500 );
在自己网站的CSS样式表中，放入以下的CSS样式。用于控制滚动区域的样式。
.pd5{ padding-top:5px}
.dis{display:block}
.undis{display:none}.mqs{ margin:10px auto; width:199px; height:479px; padding-bottom:10px;border:1px solid #DFDFDF}
#mq{width:199px;height:60px; margin:0 auto; text-align:left;}
#mq ul{ width:100%;}
#mq ul li{padding:11px 10px 12px 10px; height:36px; width:179px; overflow:hidden ;text-align:left; border-bottom:1px dashed #CCCCCC }
#mq ul li .vo1,#mq ul li .vo2{ height:18px; width:100%; overflow:hidden}
#mq ul li .vo1 .name{ float:left; width:108px; height:18px; line-height:18px}
#mq ul li .vo1 .name span{ float:left; color:#ED701A; width:68px; height:18px; line-height:18px;overflow:hidden;text-overflow:ellipsis;}
#mq ul li .vo1 .name span a{ color:#ED701A}
#mq ul li .vo1 .name em{ float:left; line-height:18px; height:18px; font-style:normal}
#mq ul li .vo1 .time{ float:right; overflow:hidden; width:68px; text-align:right;line-height:18px; height:18px; color:#888888}
#mq ul li .vo2{ line-height:18px;text-overflow:ellipsis}

通过以上几次的操作就可以实现不间断每次向上滚动一条数据滚动特效效果。除此以外，我们自己建网站还可以制作图片无缝滚动+鼠标悬停效果。

不间断每次滚动一条数据JS特效制作

制作不间断每次向上滚动一条数据滚动特效的步骤：

相关教程：