纯javascript实现文字、图片无限滚动效果
来源：互联网 发布：淘宝网广场舞服装套装 编辑：程序博客网 时间：2024/04/30 04:35
使用说明：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://haiqiancun.com/">http://haiqiancun.com/http://haiqiancun.com/http://haiqiancun.com/</a><img src="http://haiqiancun.com/application/js/xheditor_emot/default/proud.gif" data-tag="simg" data-bd-imgshare-binded="1"> </div></div><div class="l"> right:<br/> <div id="xMarquee2" class="xMarquee"> <a href="http://haiqiancun.com/">http://haiqiancun.com/http://haiqiancun.com/http://haiqiancun.com/</a><img src="http://haiqiancun.com/application/js/xheditor_emot/default/proud.gif" data-tag="simg" data-bd-imgshare-binded="1"> </div></div><div class="l"> up:<br/> <div id="xMarquee3" class="xMarquee"> <br/><a href="http://haiqiancun.com/">http://haiqiancun.com/http://haiqiancun.com/http://haiqiancun.com/</a><img src="http://haiqiancun.com/application/js/xheditor_emot/default/proud.gif" data-tag="simg" data-bd-imgshare-binded="1"><br/> <br/><a href="http://haiqiancun.com/">http://haiqiancun.com/http://haiqiancun.com/http://haiqiancun.com/</a><img src="http://haiqiancun.com/application/js/xheditor_emot/default/proud.gif" data-tag="simg" data-bd-imgshare-binded="1"> </div></div><div class="l"> down:<br/> <div id="xMarquee4" class="xMarquee"> <br/><a href="http://haiqiancun.com/">http://haiqiancun.com/http://haiqiancun.com/http://haiqiancun.com/</a><img src="http://haiqiancun.com/application/js/xheditor_emot/default/proud.gif" data-tag="simg" data-bd-imgshare-binded="1"><br/> <br/><a href="http://haiqiancun.com/">http://haiqiancun.com/http://haiqiancun.com/http://haiqiancun.com/</a><img src="http://haiqiancun.com/application/js/xheditor_emot/default/proud.gif" data-tag="simg" data-bd-imgshare-binded="1"> </div></div><div style="clear:both;"></div><br/><br/><br/><br/><br/><br/><br/><div class="l"> left:<br/> <div id="xMarquee5" class="xMarquee" style="height:150px;"> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/574e9258d109b3debf7150efcebf6c81810a4c6e.jpg" width="150" height="200" /></a> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/342ac65c103853431732c6a99113b07ecb8088bd.jpg" width="150" height="200" /></a> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/4bed2e738bd4b31c6769914e85d6277f9f2ff8ea.jpg" width="150" height="200" /></a> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/4a36acaf2edda3cc7ef6f9a803e93901213f9223.jpg" width="150" height="200" /></a> </div> </div><div class="l"> right:<br/> <div id="xMarquee6" class="xMarquee" style="height:150px;"> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/574e9258d109b3debf7150efcebf6c81810a4c6e.jpg" width="150" height="200" /></a> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/342ac65c103853431732c6a99113b07ecb8088bd.jpg" width="150" height="200" /></a> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/4bed2e738bd4b31c6769914e85d6277f9f2ff8ea.jpg" width="150" height="200" /></a> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/4a36acaf2edda3cc7ef6f9a803e93901213f9223.jpg" width="150" height="200" /></a> </div></div><div class="l"> up:<br/> <div id="xMarquee7" class="xMarquee" style="height:500px; width:150px;"> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/574e9258d109b3debf7150efcebf6c81810a4c6e.jpg" width="150" height="200" /></a> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/342ac65c103853431732c6a99113b07ecb8088bd.jpg" width="150" height="200" /></a> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/4bed2e738bd4b31c6769914e85d6277f9f2ff8ea.jpg" width="150" height="200" /></a> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/4a36acaf2edda3cc7ef6f9a803e93901213f9223.jpg" width="150" height="200" /></a> </div></div><div class="l"> down:<br/> <div id="xMarquee8" class="xMarquee" style="height:500px; width:150px;"> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/574e9258d109b3debf7150efcebf6c81810a4c6e.jpg" width="150" height="200" /></a> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/342ac65c103853431732c6a99113b07ecb8088bd.jpg" width="150" height="200" /></a> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/4bed2e738bd4b31c6769914e85d6277f9f2ff8ea.jpg" width="150" height="200" /></a> <a href="http://haiqiancun.com/"><img src="http://haiqiancun.com/file//study/meinv/4a36acaf2edda3cc7ef6f9a803e93901213f9223.jpg" width="150" height="200" /></a> </div></div></body></html>原文地址 http://haiqiancun.com/bbs/bbsPage/0/detail/297e9e7946a599780146a5a38dde0003/1/20140826154818
狠狠点击下载demo
0 0
- 纯javascript实现文字、图片无限滚动效果
- 纯JavaScript实现全屏滚动效果
- javascript实现图片滚动效果
- javascript实现图片滚动效果
- 保存图片到本地，查看本地图片，递归实现scrollView的无限循环滚动，文字横向渐变效果,autoLayout
- Javascript实现浏览器标题栏文字滚动效果
- javascript 文字滚动效果
- 用JavaScript实现文件图片滚动效果
- 不间断连续图片滚动效果(JavaScript实现)
- javascript实现图片滚动效果代码
- javascript 实现新闻咨询图片滚动效果
- 图片旋转、无限滚动、文字跳动
- 文字/图片向上无限循环滚动
- html 文字、图片水平无限滚动
- 【JavaScript】连接文字滚动效果
- html之marquee实现图片文字滚动效果详解
- 网页中文字及图片实现滚动效果
- CSS 实现触屏【图片文字】左右滚动效果
- Java IO流学习总结
- 少年时代电影桌面壁纸，外国影视壁纸
- ios 获得设备的方向
- 闭包
- ora-27102 solaris 内存限制
- 纯javascript实现文字、图片无限滚动效果
- Python的日志系统
- Drools入门Helloworld
- 客户端测量输出文章的宽高方案
- Oracle清除表的高水位线
- spring-jms(activemq实现)使用queue发送消息简单例子
- 对自己之前做过项目所做的一些笔记
- 软件开发：个人与团队是永远的核心
- 服务器,tomcat,网页请求错误400，The request sent by the client was syntactically incorrect的问题
