3种方法实现列表自动滚动
2016-07-28 10:48
381 查看
自动滚动这种效果在网页中还是比较常见的。现在,就我在做项目期间所用到的能够实现自动滚动的方法做一个总结。
方法一:用javascript原生代码实现,不需要依赖任何框架,代码及注释如下:
方法二:依赖jquery,可以进行不定高的滚动
方法三:从左往右轮播
基本上上面三种的新闻轮播方法在项目中已经够用了,希望能够对大家有所帮助~如有不懂,欢迎留言~~
方法一:用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);} }
基本上上面三种的新闻轮播方法在项目中已经够用了,希望能够对大家有所帮助~如有不懂,欢迎留言~~
相关文章推荐
- Java代码规范
- 1008. 数组元素循环右移问题 (20)
- 使用memc-nginx和srcache-nginx模块构建高效透明的缓存机制
- Java的IO
- 判断Wifi
- redis学习记录(redis的持久化操作、基于java的jedis操作)
- 关于serialVersionUID的说明
- 倒计时 小例子 SurfaceView
- JS中正则表达式只有3种匹配模式(没有单行模式)详解
- 33个优秀的HTML5应用演示 (转)
- 92.You executed the following commands in an RMAN session for your database instance that has failur
- request和response的知识
- 33个优秀的HTML5应用演示 (转)
- ACL权限实例讲解之基础二
- 字典树介绍
- 6个处理数据不均衡的策略
- MBR&/BOOT和GRUB三者关系总结
- 一致性哈希算法及其在分布式系统中的应用
- Javascript模块化编程(三):require.js的用法
- android中xmlns:tools属性详解