CSSの背景画像をjqueryで1xpづつ上に動かしてループします

yotigory

13年前

JSを読み込みます

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/move.js"></script>

[move.js]JavaScript

$(function(){
  //初期設定
  $('#sp_move').css("background-position","0px 0px");
  //背景画像の高幅
  var bkimgH=2000;
  //背景画像のポジション位置(高さ) 
  var posY=0;
  var timerID=setInterval(function(){
      //ポジション位置を1PXずつあげる
	  posY+=1;
	  if(posY>=bkimgH){posY=0}
      $('#sp_move').css("background-position","0px "+posY+"px");
	},10);
});

HTMl

<div id="sp_move">
<img src="img/title.png" width="404" height="363" />
<!--sp_move_end--></div>

CSS

#sp_move{
	width:404px;
	height:363px;
	overflow:hidden;/* IE67下部隙間対策 */
	background:transparent url('img/Gradation.jpg') repeat scroll;
}