首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js文字下上滚动+左右滚动兼容FF/IE

2012-10-07 
js文字上下滚动+左右滚动兼容FF/IE我也是最近因为要做这种效果所以找了一下,很多都没有用,有的滚动一半就

js文字上下滚动+左右滚动兼容FF/IE

我也是最近因为要做这种效果所以找了一下,很多都没有用,有的滚动一半就不滚了!以下是有用的所以收藏了,大家也可以参考一下。

转自:http://www.ok22.org/art_detail.aspx?id=114(可直接运行)

直接贴代码了:

上下滚动

左右滚动(修改:文字不够宽度时停止滚动)

运行
    <!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=gb2312"?/>?? <title>JS实现文字无间隙滚动代码</title>?? <style?type="text/css">?? body{font-size:12px;} ??.sqBorder?{width:938px;margin:0px?auto;padding:10px;border:1px?#91CD5A?solid;background:#DAEEB5;} ??.scroll_div?{width:936px;margin:0?auto;overflow:?hidden;white-space:?nowrap;} ??.scroll_div?a:hover{color:#FF0000} ??.scroll_div?a{color:#000;margin-right:5px;} ??.scroll_div?a?img{border:none;?vertical-align:middle;} ??#scroll_begin,?#scroll_end,?#scroll_begin?ul,?#scroll_end?ul,?#scroll_begin?ul?li,?#scroll_end?ul?li{display:inline;} ??</style>?? </head>?? <body>?? <script?language="javascript">?? function?ScrollImgLeft(){ ??var?speed=30; ?? ????var?scroll_begin?=?document.getElementById("scroll_begin"); ?? ????//alert(scroll_begin.scrollWidth); ??????var?scroll_end?=?document.getElementById("scroll_end"); ?? ????var?scroll_div?=?document.getElementById("scroll_div"); ?? ????if?(scroll_begin.scrollWidth?>?parseInt(document.body.clientWidth)?/?2)?{ ?? ????????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)?} ?? ????} ??} ??</script>?? <div?style="text-align:center">?? ??<div?class="sqBorder">?? ????<!--#####滚动区域#####-->?? ????<div?id="scroll_div"?class="scroll_div">?? ??????<div?id="scroll_begin">?? ????????<ul>?? ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>?? ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>?? ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>?? ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>?? ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>?? ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>?? ??????????<li><a?href="#">供需打法在若需寺革基本原则霜期地模压</a></li>?? ????????</ul>?? ??????</div>?? ??????<div?id="scroll_end"></div>?? ????</div>?? ????<!--#####滚动区域#####-->?? ??</div>?? ??<script?type="text/javascript">ScrollImgLeft();</script>?? </div>?? <!--//向左滚动代码结束-->?? </body>?? </html>??

热点排行
Bad Request.