DOM 스크립팅에서 이미지 전환 [Firefox와 호환]_이미지 특수 효과

학습 과정에서 다른 사람의 코드 구현을 분석하는 것은 좋은 습관입니다. 잘 이해되지 않더라도 코드를 몇 번 더 입력하는 것도 감각을 키우는 데 좋습니다. 다음은 실제 효과입니다(일반적으로 Firefox에서만 테스트합니다).

　

위 탐색 링크 위로 마우스를 슬라이드하면 아래 상자의 그림이 좌우로 움직이는 효과로 부드럽게 전환됩니다.

html 구조는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

웹 디자인

당신이 알아야 할 사항입니다.

;

구조

="presentation.html" >프레젠테이션

행동 >

정말 간단합니다. 아래 js 코드를 직접 살펴보겠습니다. 먼저 두 가지 보조 기능을 제공합니다.
addLoadEvent

코드 복사

코드는 다음과 같습니다. : function addLoadEvent(func) { var oldonload = window.onload;

if(typeof window.onload != "function") {

window.onload = func ;
} else {
window.onload = function() {
oldonload()
func()
}
}


이름에서 알 수 있듯이 이 함수는 로딩 창의 onload 이벤트를 처리하는 메서드입니다.
insertAfter

코드 복사

코드는 다음과 같습니다. function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if(parent.lastChild == targetElement) {

parent.appendChild(newElement);

} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}


insertBefore가 있지만 DOM API에는 insertAfter가 없으므로 여기에서 사용자 정의하십시오. insertAfter 메소드는 addChild 및 insertBefore 함수를 알고 있는 한 targetElement 앞에 newElement를 삽입하는 한 이해하기 쉽습니다.
다음 moveElement 함수는 매우 핵심입니다.
moveElement

코드 복사

코드는 다음과 같습니다. function moveElement(elementID, final_x, final_y, 간격) { if(!document.getElementById) return false if(!document.getElementById(elementID)) return false; var elem = document .getElementById(elementID);

if(elem.movement) {

clearTimeout(elem.movement)
}
if(!elem.style.left) {
elem.style.left = "0px";
}
if(!elem.style.top) {
elem.style.top = "0px"
} var xpos = parsInt(elem.style.left);
var ypos = parsInt(elem.style.top);
if(xpos == final_x && ypos == final_y) {
return true;
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10)
xpos = xpos dist
}
if(xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10)
xpos = xpos - dist
}
if(ypos < final_y) {
var; dist = Math.ceil((final_y - ypos)/10);
ypos = ypos dist
}
if(ypos > final_y) {
var dist = Math.ceil((ypos) - final_y)/ 10);
ypos = ypos - dist;
}
elem.style.left = xpos "px"
elem.style.top = ypos "px"; >varpeat = "moveElement('" elementID "'," final_x","final_y","interval")"
elem.movement = setTimeout(repeat, 간격)


final_x, final_y는 각각 요소 이동이 종료되는 왼쪽 및 위쪽 값이므로 이동된 요소는 위치 속성("상대" 또는 "위치")을 설정해야 합니다. 이 함수는 어렵지 않습니다. 요소의 현재 왼쪽 및 위쪽 값을 가져와 final_x, final_y와 비교한 다음 각 단계 크기에 따라 왼쪽 및 위쪽 값을 변경하면 됩니다. 각 if의 dist 변수입니다. 각 dist는 이동된 요소의 가장 최근 왼쪽과 위쪽을 기준으로 계산되므로 먼저 가속한 다음 감속하는 이동 효과가 있기 때문입니다. setTimeout과 결합된 매개변수 간격을 사용하면 됩니다. moveElement를 사용하여 요소가 final_x 및 final_y로 이동할 때까지 호출합니다.
그런 다음 pepareSlideshow 함수를 사용하여 필요한 dom 요소를 동적으로 생성합니다.
prepareSlideshow

코드 복사 코드는 다음과 같습니다.

function prepareSlideshow() {
//브라우저가 DOM API를 이해할 수 있는지 확인하세요.
if(!document.getElementsByTagName ) return false;
if(!document.getElementById) return false
/ /요소가 이미 존재하는지 확인
if(!document.getElementById("linklist")) return false; Slideshow = document.createElement("div");
/*Css에서 이를 설정하면 여기서 속성을 생략할 수 있습니다.
slideshow.style.position = "relative"
slideshow.style.overflow = " Hidden";
slideshow.style.width = "100px";
slideshow.style.height = "100px";
*/
slideshow.setAttribute("id", "slideshow");
var Preview = document.createElement("img");
/*CSS에서 설정한 경우 여기에서 생략할 수 있습니다.
preview.style.position = "absolute"
*/
Preview.setAttribute("src", "slideshow/topics.gif")
Preview.setAttribute("alt", "웹 디자인의 구성 요소")
preview.setAttribute("id", "preview ");
slideshow.appendChild(미리 보기);
var list = document .getElementById("linklist");
insertAfter(slideshow, list);
//ol의 모든 요소 가져오기
varlinks = list.getElementsByTagName("a");
//
links[0].onmouseover = function() {
moveElement("preview)의 각 마우스 오버 이벤트에 moveElement 메서드를 연결합니다. ",-100, 0, 10);
}
링크 [1].onmouseover = function() {
moveElement("preview",-200, 0, 10);
}
links[2].onmouseover = function() {
moveElement( "preview",-300, 0, 10);
}
}

여기에도 포함됩니다. 일부 요소 생성, 요소 속성 설정 및 기타 기본 DOM API 응용 프로그램 그런 다음 ol[id="linklist"]의 a 요소에 마우스 이동 이벤트에 해당하는 moveElement 메서드를 추가하고 마지막으로 addLoadEvent(prepareSlideshow)를 사용합니다. 이 기능은 HTML 및 렌더링과 결합하면 이해하기 쉽습니다.
코드 패키지 다운로드
http://www.jb51.net/jiaoben/27501.html