javascript: テキストを中断せずに左に移動するコード例_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 if(divList[i].parentNode==obj){ obj2=divList[i]; } } //スクロールする必要があるすべての列を取得します //divList を 2 回ループする目的は、スタイル名がスクロール コードに影響を与えないようにすることです //つまり、スクロールするコードとスタイル名の結合を可能な限り減らす var cellCount = 0; _this.cellList = new Array(); for(var i=0;i if(divList[i].parentNode==obj2){ cellCount ; _this.cellList.push(divList[i]);//スクロールする必要があるすべての列 } } _this.resetCellList=function(){ //この関数は主に中断のないスクロール用です //終点までスクロールするたびに使用する必要があります / /すでにスクロールされている列をリセットします 現在の列の後に移動 for(var i=0;i obj2.removeChild(_this.cellList[i]); 🎜>obj2.appendChild( _this.cellList[i]); } //_this.cellList を再取得 _this.cellList = new Array(); ;divList.length ;i ){ if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]); } //alert(_this.cellList. length); } _this.resetForMoveRight=function(){ //この関数は主に中断のないスクロールに使用されます //resetCellList との違いは、この関数が中断のないスクロールに使用されることです。 right //開始点までスクロールするたびに、 を使用する必要があります//現在の列の後のすべての列を現在の列の前に移動します 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(); ;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.sleep=function() { _this.scrollTimes; if(_this.scrollTimes>=_this.space){ _this.scrollTimes=0; } }; _this.moveStart = true ;//移動を開始するかどうか _this.isMoveLeft = true;//左に移動するかどうか _this.move=function(){ obj.onmouseover=function( ){ _this.moveStart= false; obj.onmouseout=function(){ _this.moveStart=true; }; >if(obj.scrollLeft> =endScroll && _this.isMoveLeft){//左に移動し、最後まで移動しました if(_this.moveLength > 0) _this.moveLength = cellScroll;//Adjust if(_this.cellList.length&gt ;0){ _this.resetCellList();//セルリストを更新 obj.scrollLeft=0; }else{ _this.scrollEnd = true; 🎜>} }else if(obj.scrollLeft if(_this.moveLength > 0) _this.moveLength = cellScroll;//調整 if(_this.cellList.length>0){ _this.resetForMoveRight();//セルリストを更新 obj.scrollLeft=endScroll; >_this.scrollEnd = false; } } // if(_this.scrollEnd){//左に移動 if(_this.moveLength obj.scrollLeft-- ; _this.moveLength ; }else if(_this.moveLength>=cellScroll){ _this.sleep() } else{//右に移動 if(_this.moveLength 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; }; ="Content-Type" content="text/html; charset=gb2312" /> #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 と同じである必要があります*/ - -> #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 定義と同じである必要があります*/ タイトルなし Document 🎜> 2 列目 3 列目 4 列目 5 列目 左に移動 右に移動 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 箇所にスクロールするページが必要ですか? //問題ありません!それを実現するには、さらにいくつかの新しいインスタンスが必要です // -->

javascript: テキストを中断せずに左に移動するコード例_javascript スキル

関連記事