Js间断/连续的文字滚动代码

Js间断/连续的文字滚动代码

    • Js文字滚动代码，可设置间断滚动和连续滚动。滚动时是向上滚动的，控制Li列表滚动，兼容性表现地不错，兼容IE/火狐、Opera等浏览器，代码如下：

      01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
      02 <html>
      03 <head>
      04 <title>文字间隔滚动代码-兼容IE和FireFox</title>
      05 <style type="text/css">
      06 <!--
      07 body {
      08     text-align:center;
      09 }
      10 ul{
      11 margin:0px;
      12 padding:0px;
      13 list-style:none;
      14 }
      15 #andyscroll {
      16     overflow: hidden;
      17     background: #E8F8F8;
      18     padding: 0 10px;
      19     text-align: left;
      20     width:400px;
      21     height:100px;
      22     overflow:hidden;
      23 }
      24 #andyscroll a {
      25     font:12px/18px tahoma;
      26     color: #000;
      27     float:left;
      28     width:100%;
      29     text-decoration: none;
      30     display:block;
      31 }
      32 #andyscroll a:hover {
      33     font:12px/18px tahoma;
      34     color: #F60;
      35 }
      36 -->
      37 </style>
      38 </head>
      39 <body>
      40 <div id="andyscroll">
      41 <div id="scrollmessage">
      42 <UL>
      43 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
      44 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
      45 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
      46 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
      47 <li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
      48 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
      49 <li><a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a></li>
      50 <li><a href="#">完全兼容IE, FF, Opera, 文字间断滚动测试……</a></li>
      51 <ul>
      52 </div>
      53 </div>
      54 <script type="text/javascript">
      55 var stopscroll = false;
      56 var scrollElem = document.getElementById("andyscroll");
      57 var marqueesHeight = scrollElem.style.height;
      58 scrollElem.onmouseover = new Function(‘stopscroll = true‘);
      59 scrollElem.onmouseout  = new Function(‘stopscroll = false‘);
      60 var preTop = 0;
      61 var currentTop = 0;
      62 var stoptime = 0;
      63 var leftElem = document.getElementById("scrollmessage");
      64 scrollElem.appendChild(leftElem.cloneNode(true));
      65 init_srolltext();
      66 function init_srolltext(){
      67     scrollElem.scrollTop = 0;
      68     setInterval(‘scrollUp()‘, 35);//确定滚动速度的, 数值越小, 速度越快
      69 }
      70 function scrollUp(){
      71     if(stopscroll) return;
      72     currentTop += 1; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动
      73     if(currentTop == 19) {
      74         stoptime += 1;
      75         currentTop -= 1;
      76         if(stoptime == 180) {
      77             currentTop = 0;
      78             stoptime = 0;
      79         }
      80     }else{
      81         preTop = scrollElem.scrollTop;
      82         scrollElem.scrollTop += 1;
      83         if(preTop == scrollElem.scrollTop){
      84             scrollElem.scrollTop = 0;
      85             scrollElem.scrollTop += 1;
      86         }
      87     }
      88 }
      89 </script>
      90 </body>
      91 </html>
时间： 2024-08-06 19:43:18

Js间断/连续的文字滚动代码的相关文章

JS实现Li列表的无缝垂直文字滚动代码

非Table模式的新闻列表滚动,学习CSS的朋友可能都能做出这种效果来.运用了CSS中的Li列表标签,加上javaScript代码控制,完成完美的无缝滚动效果.在兼容性方面,在ie6,7,8,9,firefox等主流浏览器下均测试通过,用的时候您只需改变一下样式和大小,再将Js封装起来,用时候调用,就更简洁了,相信这款实用的文字滚动正是你需要的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http

marquee|各种文字滚动代码(适用公告)

marquee|各种文字滚动代码(适用公告) 1.建立第一个滚动字幕.代码: <marquee scrollAmount=2 width=300>我钟意网页树树</marquee> 效果如: 我钟意网页树树 2.各参数详解: a)scrollAmount.它表示速度,值越大速度越快.如果没有它,默认为6,建议设为1-3比较好. b)width和height,表示滚动区域的大小,width是宽度,height是高度.特别是在做垂直滚动的时候,一定要设height的值.

html文字滚动代码 （转）

html文字滚动代码 代码如下<MARQUEE>滚动文字</MARQUEE> <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" ><div align="left" ><br /></div ><center ><font face=&

纵向文字滚动代码,带上下图片控制的。鼠标放到上下图片上时滚动

<style type="text/css"> #swsh .swsh_body{height:352px;overflow:hidden;}</style></p> <div id="swsh"> <script language="javascript"> var UDMoveflag=true function scrollStart(object,offset){ object.

JS图片无间断滚动代码合集

JavaScript图片滚动代码合集,向上下左右四个方向的无缝滚动代码,前端设计开发时所能用的一个图片特效,你可只用其中的一种滚动.前端框架分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1

jquery文字垂直滚动代码实例

jquery文字垂直滚动代码实例: 文字垂直滚动效果在大量网站都有应用,尤其在新闻公告或者新闻列表之类形式的功能结构中出现. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂

18款js和jquery文字特效代码分享

jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形球状的3D云标签动画效果 原生js tagscloud文字标签云仿快播文字标签云上下滚动出现 jquery文字跳舞鼠标滑过段落文字波浪线条跳动 jquery lettering书写中文彩色文字_html彩色文字特效 jquery 文字特效霓虹灯文字效果使用jQuery和CSS jquery文字动画插件制作文字flash动画滤镜效果切换特效

图片切换特效（2）：JS图片滚动代码（无缝、平滑）

转自:http://www.codefans.net/jscss/code/255.shtml <!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">

css+jQuery制作的文字循环滚动代码

css+jQuery制作的文字循环滚动代码,尺寸只需要在css中调整即可,另外别忘记在function里面修改相关参数 百度网盘下载