ホームページ > 記事 > ウェブフロントエンド > シームレスな画像スクロール効果を実現する js_javascript スキル
シームレスな画像スクロール効果を実現する js_javascript スキル
- WBOYオリジナル
- 2016-05-16 15:19:141636ブラウズ
まず、シームレススクロールの最初の重要なポイントは動きです。ページの要素ノードを移動させる方法については、JavaScript のタイマーに関する関連知識を学ぶ必要があります。
JS でタイマーを作成するには、setTimeout と setInterval の 2 つの方法があります。まず、これらは同じパラメータを受け取ります。最初のパラメータはタイマー実行の関数で、2 番目のパラメータはタイマーが関数を実行するまでのミリ秒数を表す数値です。両者の違いは、setTimeout は指定された時間の後に関数を 1 回だけ実行するのに対し、setInterval は指定された時間ごとに関数を実行することです。簡単に言うと、setInterval は setTimeout の循環バージョンです。
タイマーの別の使用法もあります。タイマーを削除することもできます。clearTimeout と ClearInterval という 2 つのメソッドがあり、それぞれ異なるタイプのタイマーに対応しています。さらに、タイマーによって返される値であるパラメーターを 1 つだけ受け取ります (Chrome でデバッグしたところ、戻り値はすべて数値であることがわかりました)。これは、どのタイマーを削除するかを指定するために使用されます。
タイマーの知識を習得した後、タイマーを使用して要素を動かす方法を分析し始めました。実際、これは映画の原理と似ており、要素が短時間で連続的に移動することを可能にします。要素の移動を引き起こす方法については、
などの JS を通じて要素のスタイルを変更することで実現できます。oUl.style.left = oUl.offsetLeft + speed + 'px';
上記のコードでは、速度は毎回生成される変位です。速度を使用するのは非常に興味深いものです。速度の正と負の値を変更して、スクロールの方向を変更できます。
また、要素の属性 offsetLeft について、offsetLeft の値は自身の左位置と自身のマージンの和で決まること、offsetLeft は相対的な距離であることの 2 点に注意が必要だと個人的に思っています。それを含むレイヤーに追加します (offsetTop と同様)。もちろん、これはすべて私自身の理解であり、決して正確ではありませんが、この落とし穴を思い出して、次回具体的に解決してみます。
要素を動かす原理は基本的に次のとおりです。この画像のシームレスなスクロール表示の実装方法を分析してみましょう。原理はすべて左側にスクロールします。コード内で言及されています:
まず、ループ内でスクロールする必要がある画像が 4 つだけであると仮定します。画像をループ内でスクロールするという要件を満たすには、(1) に示すように画像をスクロールする必要があります。 >
画像が次の状況にスクロールすると:
さらに、プログラムを拡張して、マウスを画像内に移動するとスクロールを停止し、マウスを画像内に移動するとスクロールを継続するエフェクトを記述しました。これは、タイマーを削除することで実現されます。コードは非常に単純なので紹介しません。 。また、スタイルを良くするために、すべての画像のサイズを 160*120 に設定しました。コードを実行するには、画像を自分で用意する必要があります。
コードは次のとおりです:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 640px;
height: 120px;
margin: 100px auto;
background-color: #646464;
position: relative;
overflow: hidden;
}
#div1 ul{
position:absolute;
left:0;
top:0;
overflow: hidden;
background-color: #3b7796;
}
#div1 ul li{
float: left;
width: 160px;
height: 120px;
list-style: none;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oUl = document.getElementById('ul1');
var speed = 2;//初始化速度
oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图（2）
var oLi= document.getElementsByTagName('li');
oUl.style.width = oLi.length*160+'px';//设置ul的宽度使图片可以放下
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
function move(){
if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时
oUl.style.left = 0;
}
if(oUl.offsetLeft > 0){//向右滚动，当靠右的图1移出边框时
oUl.style.left = -(oUl.offsetWidth/2)+'px';
}
oUl.style.left = oUl.offsetLeft + speed + 'px';
}
oBtn1.addEventListener('click',function(){
speed = -2;
},false);
oBtn2.addEventListener('click',function(){
speed = 2;
},false);
var timer = setInterval(move,30);//全局变量 ，保存返回的定时器
oDiv.addEventListener('mouseout', function () {
timer = setInterval(move,30);
},false);
oDiv.addEventListener('mousemove', function () {
clearInterval(timer);//鼠标移入清除定时器
},false);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="向左">
<input id="btn2" type="button" value="向右">
<div id="div1">
<ul id="ul1">
<li><img src="img/img_1.jpg"></li>
<li><img src="img/img_2.jpg"></li>
<li><img src="img/img_3.jpg"></li>
<li><img src="img/img_4.jpg"></li>
</ul>
</div>
</body>
</html>