jQuery文字无缝滚动

JavaScript016

jQuery文字无缝滚动,第1张

jq有一个scroll.js插件，就是实现文字无缝滚动的。其使用方法也很简单。

①：在<head></head>标签里面引用文件 jquery.js，scroll.js，style.css；

②：调用相关的js；如：

<script type="text/javascript">

$(document).ready(function(){

    $('.list_lh li:even').addClass('lieven')

    $("div.list_lh").myScroll({

        speed:40, //数值越大，速度越慢

        rowHeight:68 //li的高度

    })

})

</script>

PS：li的高度与rowHeight的值要一致，要不然的话会出现卡顿。

解决这个问题的思路:设置下拉菜单的最大宽度,然后文字超出时,出现横向滚动条

原因：因为表格左侧固定列，并且列宽大于了滚动条的横向宽度，导致将横向滚动条，遮盖住了。解决方式：对应表格的滚动条，设置min-width，需要大于固定列的宽度，注意：滚动条是表格哪一级的class出现的，需要对应写这一级容器的滚动条样式。

<script type="text/javascript">

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

demo的css一定要设定width和overflow:hidden

<div id="demo">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<div id="demo1">

<table width="1000" height="172" border="0" cellpadding="0" cellspacing="0">

<tr>

<td>

文字放这里

</td>

</tr>

</table>

</div>

</td>

<td>

<div id="demo2"></div>

</td>

</tr>

</table>

</div>

原理demo2复制demo1然后连成一行，demo1滚动完滚动demo2因为内容一样所以看不出来，demo2滚动完滚动demo1