JavaScript 틈새 없 는 스크롤 플러그 인
3675 단어 JavaScript코드빈 틈 없 이 스크롤cloneNode
플러그 인의 핵심 은 cloneNode () 를 사 용 했 습 니 다.
주의사항:
1. 용기 의 내용 너비 (높이) 가 용기 의 너비 (높이) 를 초과 할 때 만 정상적으로 구 를 수 있 습 니 다. (개인 적 으로 내용 이 용 기 를 초과 하지 않 았 다 고 생각 할 때 scrollLeft 나 scrollTop 이 존재 하지 않 습 니 다. 그렇지 않 으 면 높 은 사람 이 지적 하 기 를 바 랍 니 다) 2. 가로 구 르 는 용기 스타일 을 쓸 때 줄 바 꾸 지 않 는 스타일, 즉 white - space: nowrap 을 추가 하 는 것 을 잊 지 마 십시오.
직접 코드 올 리 기:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
div,ul,li{padding:0;margin:0;}
li{list-style:none;}
#js_scroll_left{white-space:nowrap; width:300px; height:30px; line-height:30px; background:#ea4c89; overflow:hidden;}
#js_scroll_left ul{ display:inline; }
#js_scroll_left ul li{ display:inline; margin:0 10px; font-size:14px; color:#fff; }
#js_scroll_top{ width:100px; height:100px; line-height:30px; background:#ffd200; overflow:hidden; padding:10px; margin:50px 0 0;}
#js_scroll_top ul{ }
#js_scroll_top ul li{ font-size:14px; color:#262a2d; }
</style>
</head>
<body>
<div id="js_scroll_left">
<ul>
<li> ！</li>
<li> ！</li>
<li> ！</li>
</ul>
</div>
<div id="js_scroll_top">
<ul>
<li> ！</li>
<li> ！</li>
<li> ！</li>
<li> ！</li>
</ul>
</div>
<script type="text/javascript" src="js/scrollFn.js"></script>
<script type="text/javascript">
window.onload = function(){
var scrollObj01 = document.getElementById("js_scroll_left");
scrollObj01.scrollLeft =
scroll({
obj:scrollObj01,
direction:"left",
ele:"ul",
time:50
});
var scrollObj02 = document.getElementById("js_scroll_top");
scroll({
obj:scrollObj02,
direction:"top",
ele:"ul",
time:50
});
}
</script>
</body>
</html>
;(function(window){
function Scroll(cfg){
this.cfg = cfg||null;
this.scrollFn();
}
Scroll.prototype.scrollFn = function(){
var cfg = this.cfg;
var temp = cfg.obj.getElementsByTagName(cfg.ele);
temp = temp.item(0).cloneNode(true);
cfg.obj.appendChild(temp);
function marquee(){
if(cfg.direction=="left"){
if(cfg.obj.scrollLeft>=temp.offsetWidth){
cfg.obj.scrollLeft-=temp.offsetWidth;
}else{
cfg.obj.scrollLeft++;
}
}else if(cfg.direction=="top"){
if(cfg.obj.scrollTop>=temp.offsetHeight){
cfg.obj.scrollTop-=temp.offsetHeight;
}else{
cfg.obj.scrollTop++;
}
}
}
var timer = setInterval(marquee,cfg.time);
cfg.obj.onmouseover = function () {
clearInterval(timer);
};
cfg.obj.onmouseout = function(){
timer = setInterval(marquee,cfg.time);
}
}
window.scroll = function(cfg){
return new Scroll(cfg);
}
})(window)이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
