jsの実用的なノンストップスクロール効果（互換性良好）

jsの実用的なノンストップスクロール効果（互換性良好）_画像特殊効果

WBOY

リリース： 2016-05-16 18:25:28

オリジナル

1266 人が閲覧しました

これは、基本的に、構造と動作が分離されているため、この 2 つの接続には 1 つの
ID のみが必要であり、同じ JS コードでこのページに複数のスクロールチャート効果を実現できます。
1.xhtml

コードをコピーコードは次のとおりです:

< /tr>

= "デモ2">

; img src="img.jpg">

スクロール 1

スクロールチャート 2

スクロールチャート 3

src="img.jpg">

スクロール図 4
table>

コードをコピーします> コードは次のとおりです:

ul,li,img,td{font-size:12px;list-style-type:none;text-align:center;margin:0;padding: 0;}
.demo{width:230px;margin-bottom:8px;height:172px;overflow:hidden;}
.demo ul{width:408px;clear:both;}
.demo li {width: 102px;float:left;text-align:center;}
.demo img{margin-bottom:8px;}

3.js

コードをコピーします

 コードは次のとおりです:

 
function startmarquee(lh,speed,delay,index) { 
var o =document.getElementById("デモ" インデックス); 
var o_td=o.getElementsByTagName("td")[0]; 
var str=o_td.innerHTML; =document.createElement(" td"); 

newtd.parentNode.appendChild(newtd);
var p=false; onmouseover=function(){ p=true;}
o.onmouseout=function() {p=false;}
function start(){
t=setInterval(Marquee,speed); if(!p){ o.scrollLeft = 3;}

} 関数 Marquee(){ if(o_td.offsetWidth-o.scrollLefto.scrollLeft-=o_td .offsetWidth; else{ if(o.scrollLeft%lh!=0){ o.scrollLeft = 3

}else{clearInterval(t);}

} 
} 
setTimeout(start,lay); 
} 
startmarquee(102,1,1500,1);//画像間のスクロールを停止します
startmarquee(102,30) ,1,2) ;// 画像の中断のないスクロール 

 
テスト コード: 通常に実行するには、HTML ファイルがロードされた後に js を実行する必要があるため、原則として div の後に js を置くことを忘れないでください。画像のスクロールとテキストのスクロールはほぼ同じです。 
デモコード:

;ul>