현재 js 책으로 JS를 배우고 있습니다. 롤오버 효과 예가 나를 잡았으므로 도움이 필요합니다.자바 스크립트 롤오버 효과 질문
Flickr.com에 스냅 샷을 업로드합니다. URL은 다음과 같습니다. http://www.flickr.com/photos/[email protected]/5389380030/
스냅 샷의 왼쪽은 페이지이고 스냅 샷의 오른쪽은 자바 스크립트 코드입니다. 내 질문은 빨간색 상자의 내용을 녹색 상자의 코드로 변경할 수 있습니까? 내가 할 수있는 경우,이 줄을 추가하는 데 방해가되는 이유는 무엇입니까 "thisLink.imgToChange = thisImage"? "thisLink.imgToChange"과 "thisImage"의 관계는 무엇입니까? 그들은 동일하거나 동일한 것입니까? 누군가 나를 위해 설명해 주시겠습니까? 대단히 감사합니다.
thisImage은 이미지 개체에 대한 참조입니다. 함수에 변수로 전달됩니다.
이미지 객체에는 소스 (.src), .width와 같은 속성이 있습니다. 높이 등
thisLink도 개체이며, 또한 properites 수 있습니다. 따라서 thisLink.imgToChange = thisImage은 "imgToChange"를 함수에 공급 된 이미지로 설정합니다. imgToChange은 프로그래머가 선택한 완전히 임의의 속성입니다. 그것은 나중에 사용되는 일부 데이터를 숨기고 사용됩니다.
이 코드는 모두 롤오버를 수행하는 "어려운 방법"을 보여줍니다. "document.getElementById"를 여러 번 입력 (또는 사용)하는 것은 고통스런 일입니다. 대부분 우리는 이러한 것들을 자동화하기 위해 스크립트에 의존합니다.
여기에서 작업중인 코드 유형의 기본적으로 최적화 된 프레임 워크는 더러운 작업을 처리하기 위해 개발되었습니다. 가장 많이 사용되는 프레임 워크는 지금까지 jQuery입니다.
한 줄의 코드에서 jQuery를 사용하여 동일한 작업을 수행 할 수 있습니다. 예 : another posting
빨간색 상자에있는 코드와 녹색 상자에있는 코드의 차이점은 무엇입니까? 어느 쪽이든 작동합니까? 어느 것이 더 낫고 왜? 다시 한번 감사드립니다. – jsnewman
나를 똑같이 보입니다. –
짧은 답변 :
.imgToChange 및 thisImg 같은 장소를 참조하십시오. .imgToChange이 속성으로 추가되어 나중에 사용하기 쉽습니다 (onmouseout 함수처럼).
UPDATE
의견에 대해서 : 그것은 어느쪽으로 든 (아마도) 작동하지 않습니다.
setupRollover()은 여러 번 호출되기 때문에 thisImage 변수는 호출 할 때마다 다른 이미지 노드를 가리 킵니다. 녹색 상자의 코드는 가장 최근의 thisImage에만 적용됩니다.
빨간색 상자는 "이벤트를 발생시킨 개체"를 의미하므로 this을 사용합니다. 빨간색 상자는 각 개체를 설정하여 해당 이미지를 나타냅니다. 그런 다음 this이 마우스 오버되면 올바른 이미지가 변경됩니다.
직접 해보십시오. 설명하는 것보다보기가 쉽습니다.
빨간색 상자에있는 코드와 녹색 상자에있는 코드의 차이점은 무엇입니까? 어느 쪽이든 작동합니까? 어느 것이 더 낫고 왜? 다시 한번 감사드립니다. – jsnewman
이 바로 웹에 대한 자바 스크립트 & 아약스를 벗어 감안할 때 : 비주얼 퀵 스타트 가이드, 7 판1, 당신은 페이지의 (라인 별)의 설명에서와 문제가있는 특히 무엇 96-97?
나에 의해 공동 작성, btw.
이 질문의 코드는 * 웹용 JavaScript 및 Ajax, Visual QuickStart Guide, 7th Edition *에서 가져온 것입니다. 나는이 책의 주 저자이다. 이 코드에서 코드가 명확하게 설명되어 있기 때문에, 나는 당신이 다른 사람들에게 당신을 위해 숙제를하라고 요구하는 학생이라고 결론을 내립니다. 그것은 학문적으로 게으르다. 기껏해야 근사하지 않다. – Negrino