Tencent_javascript 기술의 높이가 고정되지 않은 메시지에 대한 스크롤 효과
- WBOY원래의
- 2016-05-16 18:20:37953검색
[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
__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를 사용하는 것만큼 좋지는 않은 것 같습니다. 틀렸어요, 정정해주세요.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.