javascript:텍스트 가 끊임없이 왼쪽으로 이동 하 는 인 스 턴 스 코드
<!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>
<script type="text/javascript"><!--
//
//
//
var moveTag=function(obj){
var _this = this;
_this.speed = 10;//
_this.space = 10 * _this.speed;//
obj.scrollLeft=0;// ( FF)
var divList = obj.getElementsByTagName("DIV");
var obj2 = new Object();// div
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj){
obj2=divList[i];
break;
}
}
//
//divList
//
var cellCount = 0;
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2){
cellCount++;
_this.cellList.push(divList[i]);//
}
}
_this.resetCellList=function(){
//
//
//
for(var i=0;i<_this.cellList.length-1;i++){
obj2.removeChild(_this.cellList[i]);
obj2.appendChild(_this.cellList[i]);
}
// _this.cellList
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]);
}
//alert(_this.cellList.length);
}
_this.resetForMoveRight=function(){
//
// resetCellList
//
//
if(_this.cellList.length>0){
for(var i=_this.cellList.length-1;i>0;i--){
obj2.removeChild(_this.cellList[i]);
obj2.insertBefore(_this.cellList[i],obj2.childNodes[0]);
}
}
// _this.cellList
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]);
}
//alert(_this.cellList.length);
}
//alert(_this.cellList.length);
obj2.style.width = parseInt(obj.offsetWidth * cellCount) + "px";
//
//alert(_this.endScroll);
var cellScroll = obj.offsetWidth;//
var endScroll = obj2.offsetWidth - cellScroll;//
//alert(_this.cellScroll);
//
_this.moveLength = cellScroll;// , 0 , ; _this.cellScroll
_this.scrollEnd = false;
_this.scrollTimes = 0;
//
_this.sleep=function(){
_this.scrollTimes++;
if(_this.scrollTimes>=_this.space){
_this.scrollTimes=0;
_this.moveLength=0;
}
};
_this.moveStart = true;//
_this.isMoveLeft = true;//
_this.move=function(){
obj.onmouseover=function(){
_this.moveStart=false;
};
obj.onmouseout=function(){
_this.moveStart=true;
};
// cellList
if(obj.scrollLeft>=endScroll && _this.isMoveLeft){// ，
if(_this.moveLength > 0) _this.moveLength = cellScroll;//
if(_this.cellList.length>0){
_this.resetCellList();// cellList
obj.scrollLeft=0;
}else{
_this.scrollEnd = true;
}
}else if(obj.scrollLeft<=0 && !_this.isMoveLeft){// ，
if(_this.moveLength > 0) _this.moveLength = cellScroll;//
if(_this.cellList.length>0){
_this.resetForMoveRight();// cellList
obj.scrollLeft=endScroll;
}else{
_this.scrollEnd = false;
}
}
//
if(_this.scrollEnd){//
if(_this.moveLength<cellScroll && _this.moveStart){
obj.scrollLeft--;
_this.moveLength++;
}else if(_this.moveLength>=cellScroll){
_this.sleep();
}
}
else{//
if(_this.moveLength<cellScroll && _this.moveStart){
obj.scrollLeft++;
_this.moveLength++;
}else if(_this.moveLength>=cellScroll){
_this.sleep();
}
}
};
//
_this.start=function(){
setInterval(_this.move,_this.speed);
};
//
_this.moveRight=function(){
_this.scrollEnd = true;//
_this.isMoveLeft = false;//
_this.scrollTimes=0;
};
//
_this.moveLeft=function(){
_this.scrollEnd = false;//
_this.isMoveLeft = true;//
_this.scrollTimes=0;
};
};
// --></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style><!--
#list{border:#ccc 1px solid;}
#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;}
#list{width:150px;height:30px;overflow:hidden;}/* ， 、 */
#list div div{width:150px;height:30px;float:left;}/* ， 、 #list */
--></style><style mce_bogus="1">#list{border:#ccc 1px solid;}
#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;}
#list{width:150px;height:30px;overflow:hidden;}/* ， 、 */
#list div div{width:150px;height:30px;float:left;}/* ， 、 #list */</style>
<title> </title>
</head>
<body>
<div id="list">
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
<a href="javascript:moveLeft()" mce_href="javascript:moveLeft()"> </a>
<a href="javascript:moveRight()" mce_href="javascript:moveRight()"> </a>
<script type="text/javascript"><!--
var move=new moveTag(document.getElementById("list"));
move.start();
move.speed=10;// , 10
//move.space=0;// , * 16
// ，
// ，
//move.moveLeft();//
//move.moveRight();// move.moveLeft()
var moveLeft=move.moveLeft;
var moveRight=move.moveRight;
// N ？
// ！ new
// --></script>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
js 실 용적 인 무 중단 스크롤 효과(양호 호환성)다음은 방법 을 소개 한다.기본적으로 구조 와 행 위 를 분리 시 킬 수 있 습 니 다.이들 의 관 계 는 하나의 id 만 있 으 면 됩 니 다.사용 하기에 편리 합 니 다.또한 같은 js 코드 는 본 페이지 에 여...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
