ホーム

Javascriptでボタンを押したら少しずつスクロールさせる

2017年5月28日

お手本

イメージとしてはポカリスエットのサイトに置かれているこういうの

スクリーンショット 2017-05-28 14.55.41.png

サンプル

サンプルとしてはこういうものを用意

スクリーンショット 2017-05-28 14.56.53.png

実装

Javascriptの.animate()関数を使う

html

<div id="test">
    <img src="images/mic.jpg" alt="代替テキスト" width="300" height="150"  id="one">
    <img src="images/mic.jpg" alt="代替テキスト" width="300" height="150" id="tow">
    <img src="images/mic.jpg" alt="代替テキスト" width="300" height="150" id="three">
    <img src="images/mic.jpg" alt="代替テキスト" width="300" height="150" id="four">
  </div>

javascript

//カウンタの初期値を設定
var countUpValue = 0;

function OnButtonClickRight() {
countUpValue = countUpValue + 50 ;
$("#test").animate({marginLeft: countUpValue});
}

function OnButtonClickLeft() {
countUpValue = countUpValue - 50 ;
$("#test").animate({marginLeft: countUpValue});
}

悩みどころ

でも、これだと、要素が端っこまで来た時に、画面の外側に消えていってしまう。ループされるにはどうすればいか... わかるからアドバイスください

スクリーンショット 2017-05-28 15.01.01.png

参考

jsfiddle

animate offset().left

Javascriptでclick(タップ)するたびにカウントアップとカウントダウン

ポカリ

Pocket
LinkedIn にシェア

-ホーム

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.