无缝滚动显示代码,Asp.Net代码库,德仔网

代码语言
代码分类
【Asp.Net】无缝滚动显示
作者:kunkun0921 / 发布于2015/1/26/ 469

	<!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>
	 <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" type="text/javascript">
	 function myMarquee(id, name, out, speed) {
	 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 = _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);
	 var me = this;
	 this.timeout = setTimeout(function () { me.Up() }, this.out * 1000)
	 },
	 Up: function () {
	 clearInterval(this.interval);
	 var me = this;
	 this.interval = setInterval(function () { me.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;
	 }
	 }
	 };
	 var m = new Marquee(id, name, out, speed);
	 }
	 window.onload = function () { myMarquee("nli_con", "marquee", 2, 2) }
	 </script>
	</head>
	<body>
	 <div id="nli_con">
	 <dl>
	 <dt><a href="http://www.hwj123.com/" 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>
	 虚拟主机是使用特殊的软硬件技术，把一台运行在因特网上的服务器主机分成一台台&ldquo;虚拟&rdquo;的主机，每一台虚拟主机都具有独立的域名，具有完整的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>
	 中小企业一直是企业上网工程主要服务的对象，中小企业上网的效果总是&ldquo;犹抱琵琶半遮面&rdquo;显现不出什么效果，本站整理了多年对中小企业服务的经验...</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>
评论列表
本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
　滚动显示　　无缝　　滚动　
同语言下
可能有用的
kunkun0921贡献的其它代码(40)