ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptは左右のcontrol_javascriptスキルでシームレスなスクロールを実現

JavaScriptは左右のcontrol_javascriptスキルでシームレスなスクロールを実現

WBOY
リリース: 2016-05-16 16:22:43
オリジナル
1375 人が閲覧しました

シームレススクロールは、インターネット上に多くのサンプルコードがあり、互換性が高く、よく研究してください。 。

HTML コード:

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

<html>
<head lang="en">
<メタ文字セット="UTF-8">
<title>シームレススクロールtitle>
<スクリプト src="js/0010.js">スクリプト>
<link rel="stylesheet" type="text/css" href="css/0010.css" />
頭>
<本体>
<a href="javascript:">左に進みますa>
<a href="javascript:">右に進みますa>
<div id="div1">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                         div>
ボディ>
html>



CSS コード


コードをコピーします

コードは次のとおりです: *{ マージン:0; パディング: 0; }
#div1{
オーバーフロー: 非表示;
背景: 青;
位置: 相対;
幅: 600px;
高さ: 150px;
マージン:100px 自動;
}
#div1 ul{
位置: 絶対;
左: 0px;
上: 0px;
リスト形式: なし;
}
#div1 ul li{
float: 左;
}
#div1 ul li img{
幅:150px;
高さ:150px;
}



js: コード


コードをコピー

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

window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var timer=null;
varspeed=2;//スクロールの速度と方向を制御します
oUl.innerHTML=oUl.innerHTML oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length 'px';
Timer=setInterval(move,30);
oDiv.onmouseover=function(){//mouseover 暫定
clearInterval(タイマー);
};
oDiv.onmouseout=function(){//マウスアウトしてスクロールを続けます
timer=setInterval(move,30);
}
Document.getElementsByTagName('a')[0].onclick=function(){
速度=-2;
}
Document.getElementsByTagName('a')[1].onclick=function(){
速度=2;
}
関数 move(){//画像スクロール
If(oUl.offsetLeft oUl.style.left=0;
}
If(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2 'px';
}
oUl.style.left=oUl.offset左速度 'px';
}
}

効果絶大じゃないですか?

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート