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

最新推荐文章于 2022-03-02 15:31:45 发布

未来感知-UWB定位

最新推荐文章于 2022-03-02 15:31:45 发布

阅读量606

点赞数

分类专栏： js/jquery 文章标签： function 服务器 xhtml internet fun border

本文链接：https://blog.csdn.net/lyd518/article/details/6591570

版权

js/jquery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!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">

</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.codefans.net' target='_blank'><strong>2. 什么是虚拟主机？ </strong></a></dt>
   <dd>虚拟主机是使用特殊的软硬件技术，把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机，每一台虚拟主机都具有独立的域名，具有完整的Internet服务器（WWW、FTP、Email等）功能，虚拟主机之间完全独立，并可由用户自行管理，在外界看来，每一台虚拟主机和一台独立的主机完全一样。迅捷主机网为中小客户提供优质的网络环境和服务器，并由高级网管负责监控。</dd>
</dl>

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

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

</div>
<p>
<span>
$(window).addEvent("load",function (){
marquee = new Marquee("nli_con","marquee",a,b);//加载完后运行代码，nli_con是外框的id，a是间隔滚动的时间，b是滚动距离递增的数值
});
</span>
<p>
不需要固定一个行高，文档结构不一定非要像我这样。
dl可以换成div
<br/>
=============也可以使下面的结构==============
<br/>
ul
<br/>
li /li
<br/>
li /li
<br/>
/ul
</body>
</html>

未来感知-UWB定位

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js无缝滚动效果，支持不固定行高

Js无缝滚动#nli_con { height: 100px; width: 300px; overflow: hidden; border: 1px solid #999999;}div,dl,dt,dd { margin: 0px; pad
复制链接

扫一扫