jQuery文字无缝滚动

JavaScript023

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的值要一致，要不然的话会出现卡顿。

<div id="scroll_div" class="ks_pic">

<div style="height:6000000px">

<div id="scroll_begin" style="float:left" >

<div class="ks_pic_img"><img src='/uploads/1.jpg' border='0' width='126'height='160' ></div>

<div class="ks_pic_img"><img src='/uploads/1.jpg' border='0' width='126'height='160' ></div>

<div class="ks_pic_img"><img src='/uploads/1.jpg' border='0' width='126'height='160' ></div>

<div class="ks_pic_img"><img src='/uploads/1.jpg' border='0' width='126'height='160' ></div>

</div>

<div id="scroll_end" style="float:left" ></div></div>

</div>

<script>

function ScrollImgLeft(){

var speed=20,

doc=document,

scroll_begin = doc.getElementById("scroll_begin"),

scroll_end = doc.getElementById("scroll_end"),

scroll_div = doc.getElementById("scroll_div")

scroll_end.innerHTML=scroll_begin.innerHTML

function Marquee(){

if(scroll_end.offsetHeight-scroll_div.scrollTop<=0)

scroll_div.scrollTop-=scroll_begin.offsetHeight

else

scroll_div.scrollTop++

}

var MyMar=setInterval(Marquee,speed)

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

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

}

ScrollImgLeft()

</script>

因为#scroll和#wrap上面都有一些关键样式，尤其的#scroll js事件就是控制它的。如果真要去一个，要把#wrap的样式写到#scroll里，主要相同的样式别冲突，当然最好是别去掉。