DOM Scripting 의 그림 전환[호 환 Firefox]

5425 단어 DOM그림 전환
학습 과정 에서 다른 사람의 코드 를 많이 분석 하여 실현 하 는 것 은 좋 은 습관 이다.잘 모 르 더 라 도 코드 를 몇 번 더 두 드 리 는 것 도 느낌 을 주 는 일이 다.다음은 실제 효과 입 니 다.
　　
       마우스 가 위의 네 비게 이 션 링크 를 지나 갈 때 아래 상자 의 그림 을 유창 하 게 전환 시 켜 좌우 로 이동 하 는 효과 가 있 습 니 다.
html 구 조 는 다음 과 같다.   
 
<body> 
<h1>Web Design</h1> 
<p>These are the things you should know.</p> 
<ol id="linklist"> 
<li> 
<a href="structure.html">Structure</a> 
</li> 
<li> 
<a href="presentation.html">Presentation</a> 
</li> 
<li> 
<a href="behavior.html">Behavior</a> 
</li> 
</ol> 
</body>
정말 간단 하군 요.다음은 js 코드 를 직접 살 펴 보고 두 가지 보조 함 수 를 드 리 겠 습 니 다.addLoadEvent
 
function addLoadEvent(func) { 
var oldonload = window.onload; 
if(typeof window.onload != "function") { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload(); 
func(); 
} 
} 
}
이 함 수 는 말 그대로 window 를 불 러 오 는 onload 이벤트 가 처리 할 방법 insert After
 
function insertAfter(newElement, targetElement) { 
var parent = targetElement.parentNode; 
if(parent.lastChild == targetElement) { 
parent.appendChild(newElement); 
} else { 
parent.insertBefore(newElement, targetElement.nextSibling); 
} 
}
DOM API 에 insert Before 가 있 지만 insert After 가 없 기 때문에 insert After 방법 을 사용자 정의 합 니 다.append Child 와 insert Before 라 는 함수 만 잘 이해 하면 new Element 를 targetElement 전에 삽입 합 니 다.다음 moveElement 함수 핵심:moveElement
 
function moveElement(elementID, final_x, final_y, interval) { 
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 = parseInt(elem.style.left); 
var ypos = parseInt(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"; 
var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")"; 
elem.movement = setTimeout(repeat, interval); 
}
finalx, final_y 는 요소 이동 이 종 료 된 left 와 top 값 이기 때문에 이동 요 소 는 position 속성("relative"또는"position")을 설정 해 야 왼쪽,top 속성 이 작용 합 니 다.이 함수 도 어렵 지 않 습 니 다.바로 요소 현재 left 와 top 값 을 얻 은 다음 에 finalx,final_y 를 비교 한 다음 에 left 와 top 에 대해 일정한 보폭 에 따라 달라 집 니 다.매번 의 보폭 은 모든 if 중의 dist 변수 입 니 다.매번 dist 는 이동 요소 의 최신 left,top 에 따라 계산 하기 때문에 먼저 가속 한 후에 속 도 를 줄 이 는 이동 효과 가 있 습 니 다.매개 변수 interval 은 setTimeout 과 결합 하여 moveElement 를 자체 호출 하여 요소 가 final 로 이동 할 때 까지 합 니 다.x 와 finaly.이 어 pepareSlideshow 함수,동적 생 성 에 필요 한 dom 요소:prepareSlideshow
 
function prepareSlideshow() { 
//        DOM API 
if(!document.getElementsByTagName) return false; 
if(!document.getElementById) return false; 
//         
if(!document.getElementById("linklist")) return false; 
var 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", "building blocks of web design"); 
preview.setAttribute("id", "preview"); 
slideshow.appendChild(preview); 
var list = document.getElementById("linklist"); 
insertAfter(slideshow, list); 
//  ol    a   
var links = list.getElementsByTagName("a"); 
//   a mouseover     moveElement   
links[0].onmouseover = function() { 
moveElement("preview",-100, 0, 10); 
} 
links[1].onmouseover = function() { 
moveElement("preview",-200, 0, 10); 
} 
links[2].onmouseover = function() { 
moveElement("preview",-300, 0, 10); 
} 
}
여기 도 일부 요소 의 생 성,요소 속성 설정 등 기본 적 인 DOM API 를 활용 한 다음 에 ol[id="linklist"]의 a 요소 에 마우스 moveover 이벤트 에 대응 하 는 moveElement 방법 을 추가 하고 마지막 으로 addLoadEvent(prepareSlideshow)를 사용 하면 됩 니 다.html 와 효과 도 를 결합 하여 보면 이 함수 도 이해 하기 쉽다.코드 패키지 다운로드
jQuery 기반 팝 업 경고 대화 상자 미화 플러그 인(경고,확인,알림)
springboot+RabbitMQ+InfluxDB+Grafara 모니터링 실천

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage