어떻게 자바 스크립트에서 연속적인 이미지 윤곽 효과를 얻을 수 있습니까?

이 HTML 코드를 사용하여 선택 윤곽 효과를 얻지 만 첫 번째 이미지와 마지막 이미지 사이에 간격이 있습니다. 어떻게하면 자바 스크립트를 사용하여 지속적인 선택 윤곽 효과를 얻으려면이 공백을 제거 할 수 있습니다. 보다 효율적으로이 작업을 수행하는 다른 방법이있는 경우 또한 어떻게 자바 스크립트에서 연속적인 이미지 윤곽 효과를 얻을 수 있습니까?

var Obj = null; 
 
var animate ; 
 
function init(){ 
 
    Obj = document.getElementById('mover'); 
 
    Obj.style.position= 'relative'; 
 
    Obj.style.left = '-600px'; 
 
} 
 
function moveRight(){ 
 
    Obj.style.left = parseInt(Obj.style.left) + 1 + 'px'; 
 
    animate = setTimeout(moveRight,20); 
 
    if(parseInt(Obj.style.left)>800) 
 
    Obj.style.left = '-600px'; 
 
} 
 
function stop(){ 
 
    clearTimeout(animate); 
 
    Obj.style.left = '-600px'; 
 
} 
 
window.onload =init;

#wrapper { 
 
    width:800px; 
 
    overflow: hidden; 
 
} 
 
#mover{ 
 
    width:10000px; 
 
    overflow: hidden; 
 
} 
 
img{ 
 
    padding: 0px; 
 
    margin: -2px; 
 
    display: inline; 
 
}

<html> 
 
    <head> 
 
    <title>JavaScript Animation</title>  
 
    </head> 
 
    <body> 
 
    <form> 
 
     <div id="wrapper"> 
 
     <div id="mover"> 
 
      <img id="myImage" src="http://lorempixel.com/g/200/150/cats/1" width="200" height="150" /> 
 
      <img id="myImage" src="http://lorempixel.com/g/200/150/cats/2" width="200" height="150" /> 
 
      <img id="myImage" src="http://lorempixel.com/g/200/150/cats/3" width="200" height="150" /> 
 
     </div> 
 
     </div> 
 
     <p>Click the buttons below to handle animation</p> 
 
     <input type="button" value="Start" onclick="moveRight();" /> 
 
     <input type="button" value="Stop" onclick="stop();" /> 
 
    </form> 
 
    </body> 
 
</html>

는 말씀 마십시오.

출처

2015-01-27 RaghavGarg

이것은 이미지에 display: inline을 사용하면 생겨납니다. 이미지 사이의 줄 바꿈을 포함하여 모든 공백이 표시됩니다.

세 가지 좋은 해결책이 있습니다.

<div id="mover"><img id="myImage" src="images/building3.jpg" width="330" height="150"><img id="myImage" src="images/building5.jpg" width="330" height="150"><img id="myImage" src="images/building2.jpg" width="330" height="150"></div>

둘째 그냥 이미지를보고있는 때문에, 당신은 추가 할 수 있습니다 :

을이 바람직하거나 실용적이지 않을 수 있지만 첫 번째는 HTML에 이미지 사이의 줄 바꿈을 제거하는 것입니다

#mover { font-size: 0; }

공백을 없애기 위해 공백을 제거합니다. 그러나 나중에 이미지와 함께 텍스트를 추가 할 수 있다면 아무 것도 평평하게 표시되지 않으므로 명시 적으로 큰 글꼴로 다시 설정해야합니다.

또는 세 번째, 대신 수레를 사용할 수 있습니다

#mover { overflow: auto; } 
#mover img { float: left; }

출처

2015-01-27 19:25:49 Blazemonger

어떻게 자바 스크립트에서 연속적인 이미지 윤곽 효과를 얻을 수 있습니까?

답변

관련 문제