#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; } 世锦赛第一场，打得还不错，希望不是昙花一现，要战，便战至消亡！ 对刘伟真的无语了关键时刻不是失误就是浪投，男篮要想取得比赛的胜利后卫线上必须得加强防守和减少失误 男篮，加油 昨天竞彩网让分胜负是希腊让中国20分！…中国打得不错！死了一大片彩民 有希望 晚上的比赛将是男篮在这届世锦赛的首胜。加油 今晚的中国男篮让我刮目相看了，也完全出乎我的意料！积极主动、神勇自信、信赖队友、坚持自己的打法、不慌张，这简直是一支梦幻的国家队，如果个人技术能再好一点，还真有世界强队的样子。能跟前欧洲冠军希腊队打成这样，真的很佩服，不得不竖大拇哥。易建联、王治郅，个个好样的！ 刘伟其实这场还行，只是手感不好，如果那两个投篮进了肯定又有特多人说他是好控位了，而且还会说是救了中国，所以不要总怪刘伟，还是因为中国整体实力和希腊比不了，不过这场打的挺好了，这么打下去我相信中国会出线的 鄙视那些自以为了不起的人，同样是中国人，你那么凶不去世锦赛上牛比？ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]看关键的js code： 复制代码 代码如下: var $ = function (d){ typeof d == "string" &&(d = document.getElementById(d)); return $.fn.call(d); }; $.fn = function (){ 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 = 3;//滚动间隔时间,单位秒 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);//cloneNode 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("msg_weibo","marquee",1,2); }); 实现思路与以前的文字滚动是一样的，都是先充满当前容器，再通过scrollTop++往上滚的，只不过他是每次滚动的距离不是固定的，是取当前滚动消息的高度。由于scrollTop（滚出当前可视区域的高度）和offsetTop（距离父节点顶部的距离，常用于取某元素在页面的坐标位置）的区别，所以通过 if(this.lis[this.d].offsetTop <= this.box.scrollTop)来判断是否滚动完上条消息，需要停顿下了。 我觉得亮点之处在于$的写法。通常Prototype里也就取下obj||document.getElementById('objId')，他这里除此外还帮obj绑定了一些方法。他的作用是不是类似于原型扩展String、Array等对象的方法呢。这个可以借鉴。 另外，他初始化时填充容器时用document.createElement->赋innerHTML->appendChild来做，我觉的不如直接cloneNode(true)->appendChild好，如不对，欢迎指正。 主要还是填下这个月的坑，哈哈。

　　推荐阅读

　　javascript 关键字高亮显示实现代码

关键字高亮显示 脚本之家是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建>>>详细阅读

本文标题：来自腾讯的一个不固定高度得消息的滚动特效

地址：http://www.17bianji.com/kaifa2/JS/25775.html

 1/2    1