无缝滚动效果,支持不固定行高! - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Aug 31

无缝滚动效果,支持不固定行高! 不指定


<!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>无标题文档</title>
<style type="text/css">
<!--
#nli_con {
  height: 200px;
  width: 400px;
  overflow: hidden;
  border: 1px solid #999999;
}
div,dl,dt,dd {
  margin: 0px;
  padding: 0px;
}
dl {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #CCCCCC;
  font-size: 14px;
  margin-right: 10px;
  margin-left: 10px;
}
dd {
  font-size: 12px;
}
-->
</style>
<script language="javascript">
var $ = function (d){
    typeof d == "string" &&(d = document.getElementById(d));
    return $.fn.call(d);
};
$.fn = function (){//附加2个方法
  this.$ADD = function (fn){CLS.add(this,fn)};
  this.addEvent = function (sEventType,fnHandler){
    if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);}
      else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);}
      else {this["on" + sEventType] = fnHandler;}
  }
  this.removeEvent = function (sEventType,fnHandler){
    if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);}
      else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);}
      else { this["on" + sEventType] = null;}
  }
  return this;
};
var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};
var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}}
var Marquee = Class.create();
Marquee.prototype = {
  initialize: function(id,name,out,speed) {
    this.name = name;
  this.box = $(id);
  this.out  = out;
  this.speed = speed;
  this.d = 1;
  this.box.style.position = "relative";
  this.box.scrollTop = 0;
  var _li = this.box.firstChild;
  while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling;
  this.lis = this.box.getElementsByTagName(_li.tagName);
  this.len = this.lis.length;  
  for(var i=0;i<this.lis.length;i++){//计算该复制多少节点,保证无缝滚动,没必要的就不复制
      var __li = document.createElement(_li.tagName);
    __li.innerHTML = this.lis[i].innerHTML;
    this.box.appendChild(__li);
    if(this.lis[i].offsetTop>=this.box.offsetHeight)break;
  }
  this.Start();
  this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[]));
  this.box.addEvent("mouseout",Bind(this,this.Start,[]));
  },
  Start:function (){
    clearTimeout(this.timeout);
    this.timeout = setTimeout(this.name+".Up()",this.out*1000)
  },
  Up:function(){
    clearInterval(this.interval);
    this.interval = setInterval(this.name+".Fun()",10);
  },
  Fun:function (){
      this.box.scrollTop+=this.speed;
    if(this.lis[this.d].offsetTop <= this.box.scrollTop){
      clearInterval(this.interval);
    this.box.scrollTop = this.lis[this.d].offsetTop;
    this.Start();
    this.d++;
    }
    if(this.d >= this.len + 1){
       this.d = 1;
       this.box.scrollTop = 0;
    }
  }
};
$(window).addEvent("load",function (){
  marquee = new Marquee("nli_con","marquee",1,2);//加载完后运行代码,
});
</script>
</head>
<body>
<div id="nli_con">
<dl>
   <dt><a href=http://www.hwj123.com/'blog/post/10.html' target='_blank'><strong>1. 域名与网址有什么区别?</strong></a></dt>
   <dd>一个完整网址范例如下: http://www.hwj123.com....</dd>
</dl>

<dl>
   <dt><a href='http://www.hwj123.com/blog/post/8.html' target='_blank'><strong>2. 什么是虚拟主机? </strong></a></dt>
   <dd>虚拟主机是使用特殊的软硬件技术,把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每一台虚拟主机都具有独立的域名,具有完整的Internet服务器(WWW、FTP、Email等)功能,虚拟主机之间完全独立,并可由用户自行管理,在外界看来,每一台虚拟主机和一台独立的主机完全一样。迅捷主机网为中小客户提供优质的网络环境和服务器,并由高级网管负责监控。</dd>
</dl>

<dl>
   <dt><a href='http://www.hwj123.com/blog/post/45.html' target='_blank'><strong>3. 关于中小企业网站建设的知识</strong></a></dt>
   <dd> 中小企业一直是企业上网工程主要服务的对象,中小企业上网的效果总是“犹抱琵琶半遮面”显现不出什么效果,本站整理了多年对中小企业服务的经验...</dd>
</dl>

<dl>
   <dt><a href='http://www.hwj123.com/blog/post/42.html' target='_blank'><strong>4. 为什么要建立网站标准?什么是网站标准?</strong></a></dt>
   <dd>  我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的</dd>
</dl>

<dl>
   <dt><a href='http://www.hwj123.com/blog/post/22.html' target='_blank'><strong>5. 企业网站建设须注意的10大问题</strong></a></dt>
   <dd> 企业网站已经成为一个企业互联网战略的基础,有人说:"10年以后,互联网业将消失。"...</dd>
</dl>

<dl>
   <dt><a href='http://www.hwj123.com/blog/post/30.html' target='_blank'><strong>6. 2009牛年,网站怎样发展好</strong></a></dt>
   <dd>  第一,选择做网站内容, 制定网站内容,根据你的团队工作能力,工作量接受范围度等等,制定一个框架性的简单的方案。  最好能发挥自己的专长,如果你是三国里的张飞...</dd>
</dl>
<dl>
   <dt><a href='http://www.hwj123.com/blog/post/13.html' target='_blank'><strong>7. Internet域名是什么??</strong></a></dt>
   <dd>Internet域名,是Internet网络上的一个服务器或一个网络系统的名字,在全世界,没有一个重复的域名。域名的形式是以若干个英文字母和数字组成,由...</dd>
</dl>
</div>
</body>
</html>

注释

$(window).addEvent("load",function (){
  marquee = new Marquee("nli_con","marquee",a,b);//加载完后运行代码,nli_con是外框的id,a是间隔滚动的时间,b是滚动距离递增的数值
});

不需要固定一个行高,文档结构不一定非要像我这样。
可以换成

=============也可以使下面的结构==============

      

  •   



▲返回顶部
Last modified by tommyhu on2009/08/31 14:54

Add a comment

Nickname

emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot