div에서 텍스트 좌우 순환 스크롤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> DIV</title>
<script>
(function(ns){
function Scroll(element){
var content = document.createElement("div");
var container = document.createElement("div");
var _this =this;
var cssText = "position: absolute; visibility:hidden; left:0; white-space:nowrap;";
this.element = element;
this.contentWidth = 0;
this.stop = false;
content.innerHTML = element.innerHTML;
//
content.style.cssText = cssText;
element.appendChild(content);
this.contentWidth = content.offsetWidth;
content.style.cssText= "float:left;";
container.style.cssText = "width: " + (this.contentWidth*2) + "px; overflow:hidden";
container.appendChild(content);
container.appendChild(content.cloneNode(true));
element.innerHTML = "";
element.appendChild(container);
container.onmouseover = function(e){
clearInterval(_this.timer);
};
container.onmouseout = function(e){
_this.timer = setInterval(function(){
_this.run();
},20);
};
_this.timer = setInterval(function(){
_this.run();
}, 20);
}
Scroll.prototype = {
run: function(){
var _this = this;
var element = _this.element;
element.scrollLeft = element.scrollLeft + 1;
if(element.scrollLeft >= this.contentWidth ) {
element.scrollLeft = 0;
}
}
};
ns.Scroll = Scroll;
}(window));
window.onload=function(){
var sc = new Scroll(document.getElementById("scroll"));
var sc = new Scroll(document.getElementById("scroll2"));
}
</script>
</head>
<body>
<div id="scroll" style="width:500px;border:1px solid #f60;color:red;overflow:hidden;"> </div>
<br />
<div id="scroll2" style="width:500px;border:1px solid #060;color:006;overflow:hidden;"> </div>
</body>
</html>간단한 예는 뭘 설명할 필요가 없다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
