设计、网站、推广
始于2004年
当前位置:首页 > 网站制作

文字段落向上无缝滚动特效代码

发表日期:2011-6-12 作者来源:派谷网络 浏览次数:

<!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.okajax.com/a/200905/ajax_erp.html' target='_blank'><strong>1. Ajax不只是炫技</strong></a></dt>

   <dd>Ajax不只是创造炫丽效果的网页技术,企业也能用来改善ERP系统的操作效率与使用性,Ajax看似容易,其实背后需要网站开发与内容建置的整体配套,能够评估Ajax的最佳使用,才...[阅读全文]</dd>

 </dl>

 

 <dl>

   <dt><a href='http://www.okajax.com/a/200905/Ajax_Calendar.html' target='_blank'><strong>2. Ajax Calendar的另类用法 </strong></a></dt>

   <dd>登录界面是信息系统提供的必备的功能,是提供给用户提供维护信息的接口。接下来,我来带领大家打造一个漂亮、安全的登录界面,使用的技术是ASP.NET+jQuery</dd>

 </dl>

 

 <dl>

   <dt><a href='http://www.okajax.com/a/200911/chinese_domain.html' target='_blank'><strong>3. 互联网40年最大变革 中文域名备受关注  </strong></a></dt>

   <dd> 互联网40年来的最大技术变革已在本周拉开了帷幕</dd>

 </dl>

 

 <dl>

   <dt><a href='http://www.okajax.com/a/200906/XMLDOM.html' target='_blank'><strong>4. 不同浏览器的XMLDOM 对象  </strong></a></dt>

   <dd>一 IE中的XML DOM1.二.Mozilla的XML DOM对象三,提供一个跨浏览器的XML DOM对象解决方案,来自于《javascript高级程序设计》...</dd>

 </dl>

 

 <dl>

   <dt><a href='http://www.okajax.com/a/200905/php_json_unicode.html' target='_blank'><strong>5.php5.2 Json不能正确处理中文的解决办法  </strong></a></dt>

   <dd> php5.2新增的json功能是非常受欢迎的,但是经过测试发现, json_encode对中文的处理是有问题的,1.不能处理GB编码,所有的GB编码都会替换成空字符.2.utf8编码的中文被编码成unicode编码,相当于javascript的escape...</dd>

 </dl>

 

 <dl>

   <dt><a href='http://www.okajax.com/a/200905/XMLHttpRequest_DOM.html' target='_blank'><strong>6. XMLHttpRequest对象和DOM对象  </strong></a></dt>

   <dd>一、XMLHttpRequest对象 <br>二、XMLHttpRequest 对象的属性: <br>三、属性 描述 onreadystatechange 状态改变的事件触发器 readyState 对象状态 (integer): </dd>

 </dl>

 <dl>

   <dt><a href='http://www.okajax.com/a/201009/discuz_qq.html' target='_blank'><strong>7.Discuz下个版本将带QQ登陆功能</strong></a></dt>

   <dd>康盛创想9月20日下午发布了新产品Discuz! X 1.5,新版本中并未出现传说中的使用QQ账号登录功能。康盛创想CEO戴志康向网易科技透露,将在10月1日将QQ登录功能向公众演示,但十一过后站…<a href="/A/webdesign/dw/" title="dreamweaver cs4"><img style="margin-left:2px;" src="/images/dreamweaver.jpg" alt="dreamweaver cs4"/></a></dd>

 </dl>

</div>

</body>

</html>

本文章系本站编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本站联系,我们将在第一时间删除内容!

相关网站设计案例

相关推荐新闻
网站建设解决方案