您的位置:首页 > 其它

3种方法实现列表自动滚动

2016-07-28 10:48 381 查看
自动滚动这种效果在网页中还是比较常见的。现在,就我在做项目期间所用到的能够实现自动滚动的方法做一个总结。

方法一:用javascript原生代码实现,不需要依赖任何框架,代码及注释如下:

    //javascript原生自动滚动
function startmarquee(lh,speed,delay,marqueeObj) {  //lh---每行列表的高度,speed---滚动的速度,delay---间隔多久滚动一次,marqueeObj---需要实现这个效果的id
var p=false;
var t;
var o=document.getElementById(marqueeObj);
o.innerHTML+=o.innerHTML;
o.style.marginTop=0;
o.onmouseover=function(){p=true;} //鼠标移入,停止滚动
o.onmouseout=function(){p=false;}//鼠标移出,继续滚动

function start(){
t=setInterval(scrolling,speed); //定时器,自动滚动
if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
}

function scrolling(){
if(parseInt(o.style.marginTop)%lh!=0){
o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
}else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
startmarquee(48,20,1000,"marqueebox"); //引用函数


方法二:依赖jquery,可以进行不定高的滚动

     //列表自动滚动
function scrollNews() {
var $news = $('#marqueebox table');
var $lineHeight = $news.find('tr:first').height();
$news.animate({ 'marginTop': -$lineHeight + 'px' }, 1000, function () {
$news.css({ margin: 0 }).find('tr:first').appendTo($news);
});
}

var scrollTimer = null;
var delay = 2000;
scrollTimer = setInterval(function () {
scrollNews();
}, delay);


方法三:从左往右轮播

    function ScrollImgLeft(start,end,wrap){
var speed=40;
var scroll_begin = document.getElementById(start);
var scroll_end = document.getElementById(end);
var scroll_div = document.getElementById(wrap);
scroll_end.innerHTML=scroll_begin.innerHTML;
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0){
scroll_div.scrollLeft-=scroll_begin.offsetWidth;
}else{
scroll_div.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
scroll_div.onmouseover=function() {clearInterval(MyMar);}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
}


基本上上面三种的新闻轮播方法在项目中已经够用了,希望能够对大家有所帮助~如有不懂,欢迎留言~~
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: