jQuery로 증분 배경 위치 애니메이션

5000px의 넓은 배경 이미지로 #photoStripe이라는 100 % 너비 및 284px 높이 div가 있습니다. 그 위에 왼쪽 및 오른쪽 탐색 버튼이 있습니다. 배경 이미지를 왼쪽이나 오른쪽으로 점진적으로 애니메이션화하여 오른쪽에서 왼쪽으로 팬 할 수 있습니다.jQuery로 증분 배경 위치 애니메이션

배경 위치의 x 및 y 값을 동시에 애니메이션 할 수있는 popular background position plugin을 사용하고 있습니다.

음, 배경이 움직이지만 한 번만 움직입니다. (다시 클릭 할 수 없습니다.) 어떤 아이디어?

jQuery를 :

$('#photoStripe').css({backgroundPosition:"0 0"}); 

$('a.moveLeft').click(function(){ 
    $('#photoStripe').stop().animate({backgroundPosition:'-=200px 0'}, {duration:500}); 
}); 
$('a.moveRight').click(function(){ 
    $('#photoStripe').stop().animate({backgroundPosition:'+=200px 0'}, {duration:500}); 
});

CSS :

#photoStripe { 
width:100%; 
height:286px; 
text-align:center; 
overflow:hidden; 
background:url(../_images/photo_stripe.jpg); 
}

출처

2011-01-27 inorganik

이 코드를 확인하고있을 때 그것은 여기, FF에서 잘 보인다 내 코드는, 당신은 당신이 모든 것을 가지고 확실하다? 당신이

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
#photoStripe { 
width:100%; 
height:286px; 
text-align:center; 
overflow:hidden; 
background:url(wallpaper.jpg); 
} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 

$('#photoStripe').css({backgroundPosition:"0 0"}); 

$('a.moveLeft').click(function(){ 
    $('#photoStripe').stop().animate({backgroundPosition:'-=200px 0'}, {duration:500}); 
}); 
$('a.moveRight').click(function(){ 
    $('#photoStripe').stop().animate({backgroundPosition:'+=200px 0'}, {duration:500}); 
}); 

}); 
</script> 
</head> 
<body> 
<a href="#" class="moveLeft">moveLeft</a> 
<a href="#" class="moveRight">moveRight</a> 
<div id="photoStripe"> 
</div> 
</body> 
</html>

가 알려줘 pls는 전체 코드를 게시 할 수 없습니다, 나는 :)

건배

출처

2011-01-27 00:18:31

당신에게 그레고리 감사를 수 있도록 노력하겠습니다! 귀하의 코드를 가져 와서 내 페이지에서 다른 코드를 점진적으로 추가하고 문제를 발견했습니다. 배경 위치 플러그인을 호출했기 때문입니다. 분명히 점진적 애니메이션을 수행하지 않으며 롤오버 효과 및 x 및 y 위치를 동시에 애니메이션하는 위치에 더 적합합니다. – inorganik

jQuery로 증분 배경 위치 애니메이션

답변

관련 문제