ホームページ > 記事 > ウェブフロントエンド > JavaScriptは左右のcontrol_javascriptスキルでシームレスなスクロールを実現
JavaScriptは左右のcontrol_javascriptスキルでシームレスなスクロールを実現
- WBOYオリジナル
- 2016-05-16 16:22:431351ブラウズ
シームレススクロールは、インターネット上に多くのサンプルコードがあり、互換性が高く、よく研究してください。 。
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: コード
背景: 青;
位置: 相対;
幅: 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';
}
}
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';
}
}
効果絶大じゃないですか？
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。