JavaScript + Ajax 実践サンプル集

Amazonの書籍をスクロールさせる

説明補足説明コードコメント投稿

このサンプルは、Amazonの書籍をジャンル（ベストセラー）で検索して書籍の表紙をスクロールさせながら表示します。表紙をクリックするとアマゾンのサイトに移動します。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<title>Scroll Amazon Books</title>   
<style type="text/css">  
  #slideCont {   
    border:solid 1px #000;   
     text-align:center;   
}  
 
  #slideCont img {   
    margin: 5px;   
}   
</style>   
<script type="text/javascript" src="MSAjax/MicrosoftAjax.js"></script>
<script type="text/javascript" src="WebServices/AmazonBookWebService4.asmx/js"></script>

img = document.createElement("img");
    img.src = result[i].SmallImage;  
    img.border = "0";
//    img.alt = String.format("{0}\n{1}, {2}, {3}",
//      result[i].Title, result[i].Author, result[i].PublicationDate, result[i].Publisher);
    anchor = document.createElement("a");
    anchor.href = result[i].AmazonURL;
    anchor.target = "_blank";     
    anchor.appendChild(img);                
    slideB.appendChild(anchor);          
 
  }
  $get("slideCont").style.display = "block";
  clip();    
}

function onError(error) {
  alert(error.get_message());
}

function clip() {   
    var contWidth = 425;   
    var contHeight = 90;   
  
    var slide = $get("slideCont");  
    var id1 = $get('slide');   
  
    id1.style.left = parseInt(id1.style.left)-1 + 'px';   
       
    slide.style.width = contWidth + "px";   
    slide.style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';   
    if(parseFloat(id1.style.left) == -(contWidth))  {   
        id1.style.left = '0px';   
    }   
    setTimeout(clip,25)   
}   
  
</script>   
</head>   
<body>   
<div id="slideCont" style="position:relative;z-index:1;width:425px;height:90px;top:0px;overflow:hidden;display:none;">   
    <div id="slide" style="position:absolute;z-index:1;top:0px;left:0px;width:850px;height:90px;overflow:hidden;">   
        <div id="slideA" style="float:left;">
        </div>   
        <div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:425px;height:90px;overflow:hidden;">   
        </div>   
    </div>   
</div>   
  
</body>   
</html>

このサンプルを編集して試してみる!

書籍のイメージをスクロールさせるには、スタイルシートのclipプロパティを使用します。

slide.style.width = contWidth + "px";   
slide.style.clip = 'rect(auto,'+ contWidth +'px,' + 
  contHeight +'px,auto)';

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

Amazonの書籍をスクロールさせる