html文字无缝滚动代码

HTML 前端之家
前端之家收集整理的这篇文章主要介绍了html文字无缝滚动代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
实例一：
经测试代码如下： 
  2. <html> 
  3. <head> 
  4. <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>滚动板</title> 
  6. <style type="text/css"> 
  7. body { font: 12px/1 "宋体",SimSun,serif; background:#fff; color:#000; } 
  8. .scrollUl { overflow:hidden; position:relative; } 
  9. #scrollUlTest1 {height:80px;} 
  10. #scrollUlTest2 {height:120px;} 
  11. .scrollUl ul,.scrollUl li { margin:0; padding:0; list-style:none outside; } 
  12. .scrollUl ul { position:absolute; } 
  13. .scrollUl li { height:20px; } 
  14. </style> 
  15. <script type="text/javascript" language="javascript"> 
  16. // containerId 滚动板外层节点的 ID 
  17. // numViews 分几屏滚动，需要滚动显示的总行数应该是分屏数的整倍数。 
  18. // showTime 每屏固定住时显示的时间，单位毫秒 
  19. // scrollTime 每次滚动一屏用的时间，单位毫秒 
  20.     var ScrollUl=function(containerId,numViews,showTime,scrollTime) { 
  21.         //定时器变量，因为有移到层上时停止滚动的事件处理，而那时可能还没开始定时器呢，所以先把这个变量声明出来。 
  22.         this.timer=null; 
  23.         this.numViews = numViews; 
  24.         this.showTime = showTime; 
  25.         this.scrollTime = scrollTime; 
  26.         this.container = document.getElementById(containerId); 
  27.         var ulChild = this.container.getElementsByTagName('ul'); 
  28.         var ul = ulChild[0]; 
  29.         //ul 是未使用 CSS 明确指定高度的，IE 中用 realstyle 取不到高度，只能得到 auto，而 getBoundingClientRect() 是 IE 和 FF 都支持的方式。 
  30.         var rect = ul.getBoundingClientRect(); 
  31.         var heightAll = rect.bottom - rect.top; 
  32.         var heightView = heightAll / this.numViews; 
  33.         var msPerPx = this.scrollTime / heightView; 
  34.         //复制出一份来，接在原块的后面，用于头接尾的显示 
  35.         var ulCopy = ul.cloneNode(true); 
  36.         ulCopy.style.top = heightAll+'px'; 
  37.         this.container.appendChild(ulCopy); 
  38.         var itself = this; 
  39.         //向上滚动的函数 
  40.         var scrollView = function() { 
  41.             var oldTop = (''==ul.style.top) ? 0: parseInt(ul.style.top) ; 
  42.             //移动到顶后，把位置复原，两个块继续从 0 开始向上移。 
  43.             if (oldTop < -heightAll) 
  44.                 { 
  45.                     oldTop = 0; 
  46.                 } 
  47.             ul.style.top = (oldTop - 1) +'px'; 
  48.             ulCopy.style.top = (oldTop + heightAll- 1) +'px'; 
  49.             //每滚一整屏多停一会。oldTop-1 是为了让其停在整数位置。 
  50.             var duration = (0 == ((oldTop-1) % heightView)) ? itself.showTime:msPerPx; 
  51.             itself.timer = setTimeout(scrollView,duration); 
  52.         }; 
  53.         //把 slide 定义为 prototype 的方法时，似乎这样 setTimeout(itself.slide,itself.showTime); 定时操作不灵，而只能是局部函数才能定时操作，如果带参数，还得封装成匿名函数： 
  54.         itself.timer = setTimeout(scrollView,itself.showTime); 
  55.         //鼠标移上时停止滚动 
  56.         this.container.onmouSEOver = function() { 
  57.             window.clearTimeout(itself.timer); 
  58.         }; 
  59.         //鼠标移开时继续滚动，不用区分当时是在整屏停止还是滚动中了，全都按静止时间来延时就得了。 
  60.         this.container.onmouSEOut = function() { 
  61.             itself.timer = setTimeout(scrollView,itself.showTime); 
  62.         }; 
  63.     }; 
  64.     window.onload = function() { 
  65.         //第一个总共 20 行，每次显示 2行，分 10 屏 
  66.         var s1 = new ScrollUl('scrollUlTest1',10,2000,1000); 
  67.         //第二个总共 18 行，每次显示 6 行，分 3 屏 
  68.         var s2 = new ScrollUl('scrollUlTest2',3,3000,2000); 
  69.         }; 
  70. </script> 
  71. </head> 
  72. <body> 
  73.     <h1>通用滚动板演示</h1> 
  74.     <h4>第1组</h4> 
  75.     <div class="scrollUl" id="scrollUlTest1"> 
  76.         <ul> 
  77.             <li>第 1 条内容</li> 
  78.             <li>第 2 条内容</li> 
  79.             <li>第 3 条内容</li> 
  80.             <li>第 4 条内容</li> 
  81.             <li>第 5 条内容</li> 
  82.             <li>第 6 条内容</li> 
  83.             <li>第 7 条内容</li> 
  84.             <li>第 8 条内容</li> 
  85.             <li>第 9 条内容</li> 
  86.             <li>第 10 条内容</li> 
  87.             <li>第 11 条内容</li> 
  88.             <li>第 12 条内容</li> 
  89.             <li>第 13 条内容</li> 
  90.             <li>第 14 条内容</li> 
  91.             <li>第 15 条内容</li> 
  92.             <li>第 16 条内容</li> 
  93.             <li>第 17 条内容</li> 
  94.             <li>第 18 条内容</li> 
  95.             <li>第 19 条内容</li> 
  96.             <li>第 20 条内容</li> 
  97.         </ul> 
  98.     </div> 
  99.     <h4>第2组</h4> 
  100.     <div class="scrollUl" id="scrollUlTest2"> 
  101.         <ul> 
  102.             <li>第 1 条内容</li> 
  103.             <li>第 2 条内容</li> 
  104.             <li>第 3 条内容</li> 
  105.             <li>第 4 条内容</li> 
  106.             <li>第 5 条内容</li> 
  107.             <li>第 6 条内容</li> 
  108.             <li>第 7 条内容</li> 
  109.             <li>第 8 条内容</li> 
  110.             <li>第 9 条内容</li> 
  111.             <li>第 10 条内容</li> 
  112.             <li>第 11 条内容</li> 
  113.             <li>第 12 条内容</li> 
  114.             <li>第 13 条内容</li> 
  115.             <li>第 14 条内容</li> 
  116.             <li>第 15 条内容</li> 
  117.             <li>第 16 条内容</li> 
  118.             <li>第 17 条内容</li> 
  119.             <li>第 18 条内容</li> 
  120.         </ul> 
  121.     </div> 
  122. </body> 
  123. </html>
  126. <!--   来自 编程之家 jb51.cc （jb51.cc）-->
实例二,经测试代码如下： 
  2. <html>
  3. <head>
  4. <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery文字无缝滚动效果代码</title>
  6. <style type="text/css">
  7. li{list-style: none;}
  8. .buy-list {height: 100px;overflow: hidden;line-height: 20px;}
  9. </style>
  10. <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  11. <script type="text/javascript">
  12. // JavaScript Document
  13. (function($){
  14.     $.fn.myScroll = function(options){
  15.     //默认配置
  16.     var defaults = {
  17.         speed:40,//滚动速度,值越大速度越慢
  18.         rowHeight:24 //每行的高度
  19.     };    
  20.     var opts = $.extend({},defaults,options),intId = [];    
  21.     function marquee(obj,step){    
  22.         obj.find("ul").animate({
  23.             marginTop: '-=1'
  24.         },function(){
  25.                 var s = Math.abs(parseInt($(this).css("margin-top")));
  26.                 if(s >= step){
  27.                     $(this).find("li").slice(0,1).appendTo($(this));
  28.                     $(this).css("margin-top",0);
  29.                 }
  30.             });
  31.         }        
  32.         this.each(function(i){
  33.             var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
  34.             intId[i] = setInterval(function(){
  35.                 if(_this.find("ul").height()<=_this.height()){
  36.                     clearInterval(intId[i]);
  37.                 }else{
  38.                     marquee(_this,sh);
  39.                 }
  40.             },speed);
  41.             _this.hover(function(){
  42.                 clearInterval(intId[i]);
  43.             },function(){
  44.                 intId[i] = setInterval(function(){
  45.                     if(_this.find("ul").height()<=_this.height()){
  46.                         clearInterval(intId[i]);
  47.                     }else{
  48.                         marquee(_this,sh);
  49.                     }
  50.                 },speed);
  51.             });        
  52.         });
  53.     }
  54. })(jQuery);
  55. $(document).ready(function(){
  56.     $('.buy-list li:even').addClass('lieven');
  57. })
  58. $(function(){
  59.     $(".buy-list").myScroll({
  60.         speed:200,//数值越大，速度越慢
  61.         rowHeight:20 //li的高度
  62.     });
  63. });
  64. </script>
  65. </head>
  66. <body>
  67.     <div class="buy-list">
  68.         <ul>
  69.             <li>1、蓝瘦香菇</li>
  70.             <li>2、蓝瘦香菇</li>
  71.             <li>3、蓝瘦香菇</li>
  72.             <li>4、蓝瘦香菇</li>
  73.             <li>5、蓝瘦香菇</li>
  74.             <li>6、蓝瘦香菇</li>
  75.             <li>7、蓝瘦香菇</li>
  76.             <li>8、蓝瘦香菇</li>
  77.         </ul>
  78.     </div>
  79. </body>
  80. </html>
  83. <!--   来自 编程之家 jb51.cc （jb51.cc）-->
实例三,经测试代码如下： 
  2. <!DOCTYPE html>
  3. <html >
  4. <head>
  5. <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <Meta name="keywords" content="" />
  7. <Meta name="description" content="" />
  8. <title>左右无间断滚动效果</title>
  9. <style type="text/css" media="all">
  10. .d1 {margin:10px auto;width:200px;height:auto;overflow:hidden;white-space:nowrap;}
  11. .d2 {margin:0px auto;background-color:#FF9933;}
  12. .div2 {width:auto;height:auto;font-size:12px;float:left;overflow:hidden;}
  13. ul{margin:0px;padding:9px;list-style:none;line-height:19px;font-size:12px;}
  14. a:link,a:visited{color:#3F78CF;text-decoration:none;}
  15. a:hover{color:#FF00CC;text-decoration:underline;}
  16. </style>
  17. <script language="javascript" type="text/javascript">
  18.     var s,s2,s3,s4,timer;
  19.     function init(){
  20.         s=getid("div1");
  21.         s2=getid("div2");
  22.         s3=getid("div3");
  23.         s4=getid("scroll");
  24.         s4.style.width=(s2.offsetWidth*2+100)+"px";
  25.         s3.innerHTML=s2.innerHTML;
  26.         timer=setInterval(mar,30)
  27.     }
  28.     function mar(){
  29.         if(s2.offsetWidth<=s.scrollLeft){
  30.             s.scrollLeft-=s2.offsetWidth;
  31.         }else{s.scrollLeft++;}
  32.     }
  33.     function getid(id){
  34.         return document.getElementById(id);
  35.     }
  36.     window.onload=init;
  37. </script>
  38. </head>
  39. <body>
  40. <div class="d1" id="div1" onm ouSEOver="clearInterval(timer)" onm ouSEOut="timer=setInterval(mar,30)">
  41.    <div class="scroll" id="scroll">
  42.      <div class="div2" id="div2">
  43.         <ul>
  44.           <li>蓝瘦香菇蓝瘦香菇蓝瘦香菇蓝瘦香菇蓝瘦香菇蓝瘦香菇</li>
  45.         </ul>
  46.   </div>
  47.   <div id="div3" class="div2"></div>
  48.  </div>
  49. </div>
  50. </body>
  51. </html>
  53. <!--   来自 编程之家 jb51.cc （jb51.cc）-->
滚动滚动滚动

猜你在找的HTML相关文章

elasticsearch扩展ik分词器词库
操作步骤 1、进入elasticsearch的plugin，进入ik。进入config。 2、在config下面建立以.di...
echarts中legend如何换行
lengend data数据中若存在&#39;&#39;，则表示换行，用&#39;&#39;切割。
Echart常用效果（一）
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { t...
freemarker中js里面取字符串，换行导致报错的解决办法
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var d...
Freemarker + xml 实现Java导出word
前言 最近做了一个调查问卷导出的功能，需求是将维护的题目，答案，导出成word，参考了几种...
【前端JSP思考】JSP中#{},${}和%{}的区别
JSP中#{},${}和%{}的区别： # #{}：对语句进行预编译，此语句解析的是占位符?，可以防止SQ...
【前端HTML】常用标签及属性
对于很多人来说，用HTML标签都是熟能生巧，而不清楚为什么是那样的标签，所以我在这列了一...
[前端]GOFLY项目-响应式登录页的设计和实现
登录界面如果要实现响应式 , 需要注意宽度的设置和media query的使用 宽度一般都是按百分比...
[前端] 设定为disabled的表单域值不能被提交
表单中的某个表单域被设定为disabled，则该表单域的值就不会被提交。 但是我们需要提交这个...
[前端] 代码中执行绑定元素的指定事件trigger方法
前面业务里有个搜索功能 , 入口比较深 , 现在想要把入口挪到有公共header的地方 , 在不想完...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作