현재 지원하는 것은 수직 및 수평 롤링입니다
http://lgyweb.com/marscroll/
이제 기본 아이디어 (수직 예)를 분석하십시오.
HTML 구조 :
다음과 같이 코드 코드를 복사하십시오.
<div id = "marscroll">
<ul>
<li> 01 </li>
<li> 02 </li>
<li> 03 </li>
<li> 04 </li>
<li> 05 </li>
</ul>
</div>
CSS :
다음과 같이 코드 코드를 복사하십시오.
<스타일 유형 = "텍스트/CSS">
ul, li {패딩 : 0;}
#marscroll {높이 : 60px;
#marscroll li {높이 : 20px;
</스타일>
(1) 우선, 내부 내용의 내용이 외부 div#marscrolll보다 높은지 여부를 결정해야하며 회전은 수행되지 않습니다.
다음과 같이 코드 코드를 복사하십시오.
// 글로벌 가변 오염을 방지하기 위해 익명 기능으로 쓰기
(기능 () {)
var target = document.getElementById ( 'marscroll'),
oul = target.getElementsByTagName ( 'ul') [0];
// 컨텐츠가 작아서이 함수를 직접 종료하십시오.
if (oul.offsetheight <target.offsetheight) 반환;
}) ();
(2) 원활함은 내용의 무한 롤링 디스플레이이므로 먼저 내용을 내부에 복사 한 다음 외부 레이어의 스크롤 탑 ++ 속성을 사용하여 SetInterval 함수를 사용해야합니다.
다음과 같이 코드 코드를 복사하십시오.
target.innerhtml += target.innerhtml;
/* 각 롤링 사이의 거리는 첫 번째 UL의 높이와 같다고 판단하고 스크롤 탑을 0으로 설정 한 다음 이러한 사이클 작업은 정보에 입각 한 스크롤링입니다.
-------------------------------------------- ------------------------------*/////
// 기능 함수를 꺼내 쉽게 호출 할 수 있습니다
var fn = function () {
if (target.scrolltop == OL_H) {
대상 .scrolltop = 0;
} 또 다른 {
target.scrolltop ++;
}
}
// setInterVal 루프
var timer = setInterVal (function () {)
fn ();
}, 30);
(3) 마우스 가이 내용을 통과하면 롤링이 중지됩니다.
다음과 같이 코드 코드를 복사하십시오.
// 잡고 있다
target.onmouseOver = function () {
클리어 타임 아웃 (타이머);
}
target.onmouseout = function () {
타이머 = setInterval (function () {
fn ();
}, 30);
}
예제 JS 총 코드 :
다음과 같이 코드 코드를 복사하십시오.
// 글로벌 가변 오염을 방지하기 위해 익명 기능으로 쓰기
(기능 () {)
var target = document.getElementById ( 'marscroll'),
oul = target.getElementsByTagName ( 'ul') [0],
oul_h = oul.offsetheight;
// 컨텐츠가 작아서이 함수를 직접 종료하십시오.
if (out_h <target.offSetheight) retoy;
target.innerhtml += target.innerhtml;
/* 각 롤링 사이의 거리는 첫 번째 UL의 높이와 같다고 판단하고 스크롤 탑을 0으로 설정 한 다음 이러한 사이클 작업은 정보에 입각 한 스크롤링입니다.
-------------------------------------------- ------------------------------*/////
// 기능 함수를 꺼내 쉽게 호출 할 수 있습니다
var fn = function () {
if (target.scrolltop == OL_H) {
대상 .scrolltop = 0;
} 또 다른 {
target.scrolltop ++;
}
}
// setInterVal 루프
var timer = setInterVal (function () {)
fn ();
}, 30);
// 잡고 있다
target.onmouseOver = function () {
클리어 타임 아웃 (타이머);
}
target.onmouseout = function () {
타이머 = setInterval (function () {
fn ();
}, 30);
}
}) ();
더 많은 요구를 충족시키기 위해 간단한 수직 및 원활함이 완료되면 기능, 수직, 수평 및 여러 통화로 캡슐화하는 것이 좋습니다.
개인 포장, 온라인 예는 다음과 같습니다.
http://lgyweb.com/marscroll/
다음과 같이 코드 코드를 복사하십시오.
기능 Gymarquee (opt) {
this.opt = opt;
if (! document.getElementByid (this.opt.targetid)) return;
this.target = document.getElementById (this.opt.targetid);
this.dir = this.opt.dir == 'crosswise': '수직';
this.effect = this.opt.effect == 'scroll': 'marquence';
this.scrollheight = this.opt.scrollheight;
this.init ();
}
Gymarquee.prototype = {
marquee : function () {
var _that = this,
Direction = 'scrolltop',
판사 = this.target.scrollheight,
타이머 = null;
if (this.dir == 'crosswise') {{
Direction = 'scrollleft';
judge = this.itemlen*this.opt.itemwidth;
this.targetchild.style.width = this.itemlen*this.opt.itemwidth*2 + 'px';
}
var dofn = function () {
if (_that.target [Direction] == judge) {
_that.target [Direction] = 0;
}
_that.target [Direction] ++;
}
타이머 = setInterval (function () {
dofn ();
}, 38);
this.target.onmouseover = function () {
if (time) cleartimeout (타이머);
}
this.target.onmouseout = function () {
타이머 = setInterval (function () {
dofn ();
}, 38);
}
},
scrolldo : function () {
var can = true,
_that = this;
this.target.onmouseOver = function () {can = false};
this.target.onmouseout = function () {can = true};
새로운 기능 () {
var stop = _that.target.scroltop%_that.scrollheight == 0 &&!
if (! stop) _that.target.scroltop == parseint (_that.target.scrollheight/2)?
settimeout (arguments.callee, _that.target.scroltop%
};
},
GetByClassName : function (className, Parent) {
var elem = [],
node = parent! = undefined && parent.nodetype == 1?
p = new regexp ( "(^| // s)"+className+"(// s | $)");
for (var n = 0, i = node.length; n <i; n ++) {
if (p.test (node [n] .className)) {{
elem.push (노드 [n]);
}
}
귀환 엘렘;
},
init : function () {
var 값 = 0;
if (this.dir == 'crosswise'&& this.effect == 'marque'&& ipt.itemname! = '') {
this.itemlen = this.target.getElementsByTagName (this.opt.itemname) .length;
value = this.itemlen*this.opt.itemwidth;
} 또 다른 {
value = this.target.scrollheight;
}
var holderhtml = this.target.innerhtml;
this.target.innerhtml = '<div>'+holderhtml+'</div>';
this.targetchild = this.getByClassName ( 'j_scrollinner', this.target) [0];
var attr = this.dir = 'vertical'?
if (value> this.target [attr]) {{
if (this.effect == 'scroll') {{
this.scrolldo ();
} 또 다른 {
this.marquee ();
}
this.targetchild.innerhtml += this.targetchild.innerhtml;
}
}
}