首页 > 代码库 > 纯javascript实现文字、图片无限滚动效果
纯javascript实现文字、图片无限滚动效果
使用说明:xMarquee(‘ 对象id ‘,‘ 滚动方向 ‘,‘ 偏移(正整数,越大滚动越快,默认 1) ‘,‘ 频率(正整数,越小滚动越快,默认 50) ‘);
根据个人需求可以对‘偏移‘和‘频率‘进行调整,达到最佳效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无限滚动</title> <style> body{ font-size:12px;} .xMarquee{ width:280px;overflow:hidden;height:32px;} img,a{border:0px;} .l{ float:left; padding:20px;} </style> <script> function xMarquee(obj,fx,temp,speed){ obj = document.getElementById(obj); var xh = obj.innerHTML; var sid = 'xScroll_'+Math.floor(Math.random()*10000); var neh = ''; var fc ; if(fx==""||fx=="right"||fx==null){ neh = '<div style="display:block;float:left;">'+xh+'</div>'; obj.innerHTML = '<div id="'+sid+'" style=" width:9900%;">'+neh+neh+'<div style="clear:both;"></div></div>'; fc = document.getElementById(sid).childNodes; if(fc[0].offsetWidth<=obj.offsetWidth){obj.innerHTML = xh;return;} document.getElementById(sid).style.width = fc[0].offsetWidth*2+'px'; }else if(fx=="up"||fx=="down"){ neh = '<div style="display:block;">'+xh+'</div>'; obj.innerHTML = '<div id="'+sid+'">'+neh+neh+'<div style="clear:both;"></div></div>'; fc = document.getElementById(sid).childNodes; if(fc[0].offsetHeight<=obj.offsetHeight){obj.innerHTML = xh;return;} document.getElementById(sid).style.height = fc[0].offsetHeight*2+'px'; } var t = 0; if(fx==''||typeof fx == undefined||fx==null){fx = "left";} if(temp==''||typeof temp == undefined||temp==null){temp = 1;} if(speed==''||typeof speed == undefined||speed==null){speed = 50;} if(fx=="right"){obj.scrollLeft = fc[0].offsetWidth*2;t = fc[0].offsetWidth;} if(fx=="down"){obj.scrollTop = fc[0].offsetHeight*2;t = fc[0].offsetHeight;} var dos = function(speed){ if(fx=="left"){ t=t+temp; if(obj.scrollLeft>=fc[0].offsetWidth){ t = temp+3; obj.scrollLeft=temp+3; }else{ obj.scrollLeft=t; } } if(fx=="right"){ t=t-temp; if(obj.scrollLeft<=0){ t = fc[0].offsetWidth+3; obj.scrollLeft=fc[0].offsetWidth+3; }else{ obj.scrollLeft=t; } } if(fx=="up"){ t=t+temp; if(obj.scrollTop>=fc[0].offsetHeight){ t = temp+3; obj.scrollTop=temp+3; }else{ obj.scrollTop=t; } } if(fx=="down"){ t=t-temp; if(obj.scrollTop<=0){ t = fc[0].offsetHeight-3; obj.scrollTop=fc[0].offsetHeight-3; }else{ obj.scrollTop=t; } } } var s = window.setInterval(function(){dos(speed)},speed); var over = function(){ window.clearInterval(s); } var out = function(){ s = window.setInterval(function(){dos(speed)},speed); } try{ obj.addEventListener('mouseover',over,false); obj.addEventListener('mouseout',out,false); }catch(e){ //ie obj.attachEvent('o**ouseover',over); obj.attachEvent('onmouseout',out); } } window.onload = function(){ xMarquee('xMarquee'); xMarquee('xMarquee2','right'); xMarquee('xMarquee3','up'); xMarquee('xMarquee4','down'); xMarquee('xMarquee5'); xMarquee('xMarquee6','right'); xMarquee('xMarquee7','up'); xMarquee('xMarquee8','down'); } </script> </head> <body> <p style="line-height:16px;"> window.onload = function(){<br/> xMarquee('xMarquee');<br/> xMarquee('xMarquee2','right');<br/> xMarquee('xMarquee3','up');<br/> xMarquee('xMarquee4','down');<br/> xMarquee('xMarquee5');<br/> xMarquee('xMarquee6','right');<br/> xMarquee('xMarquee7','up');<br/> xMarquee('xMarquee8','down');<br/> }<br/> 使用说明:xMarquee(' 对象id ',' 滚动方向 ',' 偏移(正整数,越大滚动越快,默认 1) ',' 频率(正整数,越小滚动越快,默认 50) ');<br/> 根据个人需求可以对'偏移'和'频率'进行调整,达到最佳效果。 </p> <br/><br/> <div class="l"> left:<br/> <div id="xMarquee" class="xMarquee"> <a href=http://www.mamicode.com/"http://haiqiancun.com/">http://haiqiancun.com/http://haiqiancun.com/http://haiqiancun.com/>
原文地址 http://haiqiancun.com/bbs/bbsPage/0/detail/297e9e7946a599780146a5a38dde0003/1/20140826154818狠狠点击下载demo
纯javascript实现文字、图片无限滚动效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。