多行无缝间歇的转动结果，支持不牢靠行高

发布时间：2018-08-18 15:49:09 所属栏目：编程来源：站长网

导读：多行无缝间歇的转动结果，支持不牢靠行高。节制一段笔墨在必然地区内转动。加载完后运行代码，nli_con是外框的id，a是隔断转动的时刻，b是转动间隔递增的数值，不必要牢靠一个行高，文档布局不必然非要像我这样。小提醒：dl可以换成div LI布局。示例： !D

　　多行无缝间歇的转动结果，支持不牢靠行高。节制一段笔墨在必然地区内转动。加载完后运行代码，nli_con是外框的id，a是隔断转动的时刻，b是转动间隔递增的数值，不必要牢靠一个行高，文档布局不必然非要像我这样。小提醒：dl可以换成div LI布局。

　　示例：

<!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; } } }; // 猛火網 liehuo.net 接待复制,拒绝恶意收罗ｌｉｅｈｕｏ．ｎｅｔ $(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.liehuo.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><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MYSQL_框架之主从GTID	MySQL Online DDL的实
MySQL 5.7 mysqldumps	MySQL TEXT、DATE、SE