来自腾讯的一个不固定高度得消息的滚动特效

<div> 
<table width="320" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border:1px solid black;"> 
<tr> 
<td valign="top"> 
<div class="Contentnr auto"> 
<style> 
#msg_weibo {width:300px;height:186px;*height:186px;_height:170px;margin:10px auto 0;zoom:1; overflow:hidden;font-size:12px;line-height:20px;margin-bottom:4px;background:#ffffff;} 
#msg_weibo a{margin-right:6px;color:#003C71;text-decoration:none;} 
#msg_weibo a:hover{color:#c00;text-decoration:underline;} 
#msg_weibo img{margin-top:2px;} 
#msg_weibo span{color: #888;} 
#msg_weibo div{padding:8px 0 11px 0 ;overflow:hidden;zoom:1;background:url(/upload/201009/20100901004427526.gif) left bottom repeat-x} 
#msg_weibo span a{display:block;} 
#msg_weibo img{float:left;width:50px; height:50px; padding:2px; border:#D6D6D6 1px solid;} 
#msg_weibo p{float:left;width:295px; padding-left:5px; } 
</style> 
<div id="msg_weibo"> 
<div class="con"><p> 
世锦赛第一场，打得还不错，希望不是昙花一现，要战，便战至消亡！ 
</p></div> 
<div class="con"><p> 
对刘伟真的无语了关键时刻不是失误就是浪投，男篮要想取得比赛的胜利后卫线上必须得加强防守和减少失误 
</p></div> 
<div class="con"><p> 
男篮，加油 
</p></div> 
<div class="con"><p>昨天竞彩网让分胜负是希腊让中国20分！…中国打得不错！死了一大片彩民 
</p></div> 
<div class="con"><p> 
有希望 
</p></div> 
<div class="con"><p> 
晚上的比赛将是男篮在这届世锦赛的首胜。加油 
</p></div> 
<div class="con"><p> 
今晚的中国男篮让我刮目相看了，也完全出乎我的意料！积极主动、神勇自信、信赖队友、坚持自己的打法、不慌张，这简直是一支梦幻的国家队，如果个人技术能再好一点，还真有世界强队的样子。能跟前欧洲冠军希腊队打成这样，真的很佩服，不得不竖大拇哥。易建联、王治郅，个个好样的！</p> 
</div> 
<div class="con"><p> 
如需引入外部Js需刷新才能执行]</div><BR>看关键的js code： <BR><div class="codetitle"><span style="CURSOR: pointer"  onclick="doCopy('code51355')"><U>复制代码</U></span> 代码如下:</div><div class="codebody" id="code51355"> <BR>var $ = function (d){ <BR>typeof d == "string" &&(d = document.getElementById(d)); <BR>return $.fn.call(d); <BR>}; <BR>$.fn = function (){ <BR>this.addEvent = function (sEventType,fnHandler){ <BR>if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);} <BR>else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);} <BR>else {this["on" + sEventType] = fnHandler;} <BR>} <BR>this.removeEvent = function (sEventType,fnHandler){ <BR>if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);} <BR>else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);} <BR>else { this["on" + sEventType] = null;} <BR>} <BR>return this; <BR>}; <BR>var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}}; <BR>var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}} <BR>var Marquee = Class.create(); <BR>Marquee.prototype = { <BR>initialize: function(id,name,out,speed) { <BR>this.name = name; <BR>this.box = $(id); <BR>this.out = 3;//滚动间隔时间,单位秒 <BR>this.speed = speed; <BR>this.d = 1; <BR>this.box.style.position = "relative"; <BR>this.box.scrollTop = 0; <BR>var _li = this.box.firstChild; <BR>while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling; <BR>this.lis = this.box.getElementsByTagName(_li.tagName); <BR>this.len = this.lis.length; <BR>for(var i=0;i<this.lis.length;i++){ <BR>var __li = document.createElement(_li.tagName); <BR>__li.innerHTML = this.lis[i].innerHTML; <BR>this.box.appendChild(__li);//cloneNode <BR>if(this.lis[i].offsetTop>=this.box.offsetHeight)break; <BR>} <BR>this.Start(); <BR>this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[])); <BR>this.box.addEvent("mouseout",Bind(this,this.Start,[])); <BR>}, <BR>Start:function (){ <BR>clearTimeout(this.timeout); <BR>this.timeout = setTimeout(this.name+".Up()",this.out*1000) <BR>}, <BR>Up:function(){ <BR>clearInterval(this.interval); <BR>this.interval = setInterval(this.name+".Fun()",10); <BR>}, <BR>Fun:function (){ <BR>this.box.scrollTop+=this.speed; <BR>if(this.lis[this.d].offsetTop <= this.box.scrollTop){ <BR>clearInterval(this.interval); <BR>this.box.scrollTop = this.lis[this.d].offsetTop; <BR>this.Start(); <BR>this.d++; <BR>} <BR>if(this.d >= this.len + 1){ <BR>this.d = 1; <BR>this.box.scrollTop = 0; <BR>} <BR>} <BR>}; <BR>$(window).addEvent("load",function (){ <BR>marquee = new Marquee("msg_weibo","marquee",1,2); <BR>}); <BR></div> <BR>实现思路与以前的文字滚动是一样的，都是先充满当前容器，再通过scrollTop++往上滚的，只不过他是每次滚动的距离不是固定的，是取当前滚动消息的高度。由于scrollTop（滚出当前可视区域的高度）和offsetTop（距离父节点顶部的距离，常用于取某元素在页面的坐标位置）的区别，所以通过 if(this.lis[this.d].offsetTop <= this.box.scrollTop)来判断是否滚动完上条消息，需要停顿下了。 <br><br>我觉得亮点之处在于$的写法。通常Prototype里也就取下obj||document.getElementById('objId')，他这里除此外还帮obj绑定了一些方法。他的作用是不是类似于原型扩展String、Array等对象的方法呢。这个可以借鉴。 <BR>另外，他初始化时填充容器时用document.createElement->赋innerHTML->appendChild来做，我觉的不如直接cloneNode(true)->appendChild好，如不对，欢迎指正。 <br><br>主要还是填下这个月的坑，哈哈。

<hr>

</div>
			</div>

</div>
       
      <div class="col-md-4">
	
	
	<div class="panel panel-default">
		
		<div class="panel-heading"> <a href="/php/">PHP教程</a></div>
		<div class="list-group">
<a href="/php/1.html" class="list-group-item">PHP简介</a>
<a href="/php/8.html" class="list-group-item">PHP基本语法</a>
<a href="/php/12.html" class="list-group-item">PHP类型</a>
<a href="/php/24.html" class="list-group-item">PHP变量</a>
<a href="/php/34.html" class="list-group-item">PHP运算符</a>
<a href="/php/47.html" class="list-group-item">PHP控制结构</a>
<a href="/php/67.html" class="list-group-item">PHP函数</a>
<a href="/php/74.html" class="list-group-item">PHP类与对象</a>
<a href="/php/110.html" class="list-group-item">PHP异常处理</a>
<a href="/php/function.php" class="list-group-item">函数库分类</a>
						     
				
						
					</div>
					
	</div>
				
</div>

</div>

<div class="panel panel-default">
        <div class="panel-heading">快速导航</div>
        <div class="panel-body">
                       <a href="/list.php?id=1">PHP</a>
<a href="/list.php?id=2">MySQL</a>
<a href="/list.php?id=3">HTML</a>
<a href="/list.php?id=4">CSS</a>
<a href="/list.php?id=5">JavaScript</a>
<a href="/list.php?id=6">MSSQL</a>
<a href="/list.php?id=10">AJAX</a>

<a href="/list.php?id=14">Linux</a>
<a href="/list.php?id=17">Mac</a>
<a href="/list.php?id=7">ASP</a>
<a href="/list.php?id=11">服务器</a>

<a href="/list.php?id=15">SQL</a>
<a href="/list.php?id=16">jQuery</a>

<a href="/list.php?id=18">C#</a>
<a href="/list.php?id=19">C++</a>
<a href="/list.php?id=20">java</a>
<a href="/list.php?id=21">Android</a>
<a href="/list.php?id=22">IOS</a>
<a href="/list.php?id=23">oracle</a>
<a href="/list.php?id=24">MongoDB</a>

<a href="/list.php?id=26">SQLite</a>
<a href="http://wamp.phpstudy.net/">wamp</a>
<a href="/jiaotong/">交通频道</a>   
	<span style="display:none">

</span>
                    </div>
    </div>

<hr>

</div>

<div class="bottom">
	
	<div class="container">
   Copyright © 2016 phpStudy  | 豫ICP备2021030365号-3<script src="/images/foot.js?1"></script>
    </div>
</div>
<script src="/js/foot2.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>