Tencent_javascript 기술의 높이가 고정되지 않은 메시지에 대한 스크롤 효과

<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> <a target="_blank">刘伟其实这场还行，只是手感不好，如果那两个投篮进了肯定又有特多人说他是好控位了，而且还会说是救了中国，所以不要总怪刘伟，还是因为中国整体实力和希腊比不了，不过这场打的挺好了，这么打下去我相信中国会出线的 </a></p></div> <div class="con"><p> 鄙视那些自以为了不起的人，同样是中国人，你那么凶不去世锦赛上牛比？ </p></div> </div> </div> </td> </tr> </table> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

보세요 주요 js 코드에서:

코드 복사

코드는 다음과 같습니다:

var $ = function (d){
typeof d == "string" &&(d = document.getElementById(d))
return $.fn.call(d)
$; fn = 함수(){
this.addEvent = 함수(sEventType,fnHandler){
if(this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);}
else if(this. attachmentEvent) {this.attachEvent("on " sEventType, fnHandler);}
else {this["on" sEventType] = fnHandler;}
}
this.removeEvent = 함수(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, 인수); }}} ;
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.out = 3;/ /스크롤 간격 시간, 단위 초
this.speed = 속도;
this.d = 1
this.box.style.position = "relative"; 🎜>this.box.scrollTop = 0 ;
var _li = this.box.firstChild;
while(typeof(_li.tagName)=="undefine")_li = _li.nextSibling; lis = this.box.getElementsByTagName(_li .tagName);
this.len = this.lis.length
for(var i=0;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,[]))
},
시작: 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을 통해 위로 스크롤하지만 각 스크롤의 거리는 고정되지 않으며 현재 스크롤 메시지의 높이입니다. if(this .lis[this.d].offsetTop <= this.box.scrollTop) - 마지막 메시지가 스크롤되었으며 일시 중지되어야 하는지 여부를 결정합니다.

$를 쓰는 방식이 하이라이트인 것 같아요. 일반적으로 obj||document.getElementById('objId')는 Prototype에서 제거됩니다. 또한 일부 메소드를 obj에 바인딩합니다. 그 역할은 문자열, 배열 및 기타 객체를 확장하는 프로토타입의 방법과 유사합니까? 이것은 배울 수 있습니다.
그리고 초기화 시 컨테이너를 채울 때 document.createElement->innerHTML->appendChild를 사용해서 직접적으로 cloneNode(true)->appendChild를 사용하는 것만큼 좋지는 않은 것 같습니다. 틀렸어요, 정정해주세요.

이번 달은 공백을 메우는 것이 중요하군요. 하하.