js无缝滚动效果，支持不固定行高

发表于 由
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">  
  2. <!-- saved from url=(0057)http://www.hwj123.com/blog/upload/200904171213252657.html -->  
  3. <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>js无缝滚动效果，支持不固定行高 - 杭州好望角网络科技</TITLE>  
  4. <META http-equiv=Content-Type content="text/html; charset=gb2312">  
  5. <STYLE type=text/css>#nli_con {   
  6.     BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; OVERFLOW: hidden; BORDER-LEFT: #999999 1px solid; WIDTH: 400px; BORDER-BOTTOM: #999999 1px solid; HEIGHT: 200px   
  7. }   
  8. DIV {   
  9.     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px   
  10. }   
  11. DL {   
  12.     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px   
  13. }   
  14. DT {   
  15.     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px   
  16. }   
  17. DD {   
  18.     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px   
  19. }   
  20. DL {   
  21.     FONT-SIZE: 14px; PADDING-BOTTOM: 5px; MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid   
  22. }   
  23. DD {   
  24.     FONT-SIZE: 12px   
  25. }   
  26. </STYLE>  
  27.   
  28. <SCRIPT language=javascript>  
  29. var $ = function (d){   
  30.     typeof d == "string" &&(d = document.getElementById(d));    
  31.     return $.fn.call(d);   
  32. };   
  33. $.fn = function (){   
  34.     this.$ADD = function (fn){CLS.add(this,fn)};   
  35.     this.addEvent = function (sEventType,fnHandler){   
  36.         if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);}    
  37.         else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);}    
  38.         else {this["on" + sEventType] = fnHandler;}   
  39.     }   
  40.     this.removeEvent = function (sEventType,fnHandler){   
  41.         if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);}    
  42.         else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);}    
  43.         else { this["on" + sEventType] = null;}   
  44.     }   
  45.     return this;   
  46. };   
  47. var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};   
  48. var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}}   
  49. var Marquee = Class.create();   
  50. Marquee.prototype = {   
  51.   initialize: function(id,name,out,speed) {   
  52.     this.name = name;   
  53.     this.box = $(id);   
  54.     this.out  = out;   
  55.     this.speed = speed;   
  56.     this.d = 1;   
  57.     this.box.style.position = "relative";   
  58.     this.box.scrollTop = 0;   
  59.     var _li = this.box.firstChild;   
  60.     while(typeof(_li.tagName)=="undefined")_li_li = _li.nextSibling;   
  61.     thisthis.lis = this.box.getElementsByTagName(_li.tagName);   
  62.     thisthis.len = this.lis.length;    
  63.     for(var i=0;i<this.lis.length;i++){//计算该复制多少节点，保证无缝滚动   
  64.         var __li = document.createElement(_li.tagName);   
  65.         __li.innerHTML = this.lis[i].innerHTML;   
  66.         this.box.appendChild(__li);   
  67.         if(this.lis[i].offsetTop>=this.box.offsetHeight)break;   
  68.     }   
  69.     this.Start();   
  70.     this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[]));   
  71.     this.box.addEvent("mouseout",Bind(this,this.Start,[]));   
  72.   },   
  73.   Start:function (){   
  74.       clearTimeout(this.timeout);   
  75.       this.timeout = setTimeout(this.name+".Up()",this.out*1000)   
  76.   },   
  77.   Up:function(){   
  78.       clearInterval(this.interval);   
  79.       this.interval = setInterval(this.name+".Fun()",10);   
  80.   },   
  81.   Fun:function (){   
  82.       this.box.scrollTop+=this.speed;   
  83.       if(this.lis[this.d].offsetTop <= this.box.scrollTop){   
  84.         clearInterval(this.interval);   
  85.         thisthis.box.scrollTop = this.lis[this.d].offsetTop;   
  86.         this.Start();   
  87.         this.d++;   
  88.       }   
  89.       if(this.d >= this.len + 1){   
  90.          this.d = 1;   
  91.          this.box.scrollTop = 0;   
  92.       }   
  93.   
  94.   }   
  95. };   
  96. $(window).addEvent("load",function (){   
  97.   marquee = new Marquee("nli_con","marquee",3,2);   
  98. });   
  99. </SCRIPT>  
  100.   
  101. <META content="MSHTML 6.00.2900.5880" name=GENERATOR></HEAD>  
  102. <BODY>  
  103. <DIV id=nli_con>  
  104. <DL>  
  105.   <DT><A href="http://www.hwj123.com/'blog/post/10.html'"    
  106.   target=_blank><STRONG>1. 域名与网址有什么区别？</STRONG></A>    
  107.   <DD>一个完整网址范例如下： http://www.hwj123.com.... </DD></DL>  
  108. <DL>  
  109.   <DT><A href="http://www.hwj123.com/blog/post/8.html" target=_blank><STRONG>2.    
  110.   什么是虚拟主机？ </STRONG></A>  
  111.   <DD>虚拟主机是使用特殊的软硬件技术，把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机，每一台虚拟主机都具有独立的域名，具有完整的Internet服务器（WWW、FTP、Email等）功能，虚拟主机之间完全独立，并可由用户自行管理，在外界看来，每一台虚拟主机和一台独立的主机完全一样。迅捷主机网为中小客户提供优质的网络环境和服务器，并由高级网管负责监控。    
  112.   </DD></DL>  
  113. <DL>  
  114.   <DT><A href="http://www.hwj123.com/blog/post/45.html" target=_blank><STRONG>3.    
  115.   关于中小企业网站建设的知识</STRONG></A>    
  116.   <DD>中小企业一直是企业上网工程主要服务的对象，中小企业上网的效果总是“犹抱琵琶半遮面”显现不出什么效果，本站整理了多年对中小企业服务的经验...    
  117.   </DD></DL>  
  118. <DL>  
  119.   <DT><A href="http://www.hwj123.com/blog/post/42.html" target=_blank><STRONG>4.    
  120.   为什么要建立网站标准？什么是网站标准？</STRONG></A>    
  121.   <DD>　    
  122.   我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的    
  123.   </DD></DL>  
  124. <DL>  
  125.   <DT><A href="http://www.hwj123.com/blog/post/22.html" target=_blank><STRONG>5.    
  126.   企业网站建设须注意的10大问题</STRONG></A>    
  127.   <DD>企业网站已经成为一个企业互联网战略的基础，有人说:"10年以后，互联网业将消失。"... </DD></DL>  
  128. <DL>  
  129.   <DT><A href="http://www.hwj123.com/blog/post/30.html" target=_blank><STRONG>6.    
  130.   2009牛年，网站怎样发展好</STRONG></A>    
  131.   <DD>　　第一，选择做网站内容，    
  132.   制定网站内容，根据你的团队工作能力，工作量接受范围度等等，制定一个框架性的简单的方案。　　最好能发挥自己的专长，如果你是三国里的张飞... </DD></DL>  
  133. <DL>  
  134.   <DT><A href="http://www.hwj123.com/blog/post/13.html" target=_blank><STRONG>7.    
  135.   Internet域名是什么??</STRONG></A>    
  136.   <DD>Internet域名，是Internet网络上的一个服务器或一个网络系统的名字，在全世界，没有一个重复的域名。域名的形式是以若干个英文字母和数字组成，由...    
  137.   </DD></DL></DIV>  
  138. <P>&nbsp;</P>  
  139. </BODY></HTML>  
  1. da shang
    donate-alipay
               donate-weixin weixinpay

发表评论↓↓