シームレススクロールのjsコードがわかりやすい(自作)_javascriptスキル

复制代码代码如下:

*{パディング:0; margin:0;}
ul{ list-style:none;}
#div{ width:300px;高さ:100ピクセル;マージン:100px 自動;ボーダー:1px ソリッド #ff0000;位置:相対;オーバーフロー:非表示;}
#div ul{ 位置:絶対;高さ:100ピクセル; left:0;}
#div ul li{ width:300px;高さ:100ピクセル;行の高さ:100ピクセル;テキスト整列:中央; float:left}


window.onload=function(){
var oDiv=document.getElementById("div");
var oUl=oDiv.getElementsByTagName("ul")[0];
var oLi=oUl.getElementsByTagName("li");
var oInput=document.getElementsByTagName('input');
oUl.innerHTML =oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length "px";
var iSeep=-2;
var tamer=null;
clearInterval(tamer);
function starMove(){
tamer=setInterval(function(){
oUl.style.left=oUl.offsetLeft iSeep "px";
if(-oUl.offsetLeft >= oUl. offsetWidth/2){
oUl.style.left="0px";
}else if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2 "px" ;
}
},30)
}
starMove();
oDiv.onmouseover=function(){
clearInterval(tamer);
}
oDiv.onmouseout=function(){
starMove();
}
oInput[0].onclick=function(){
iSeep=-2;
}
oInput[1].onclick=function(){
iSeep=2;
}
}

• 1


• 2


• 3


• 4

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。