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 와 효과 도 를 결합 하여 보면 이 함수 도 이해 하기 쉽다.코드 패키지 다운로드

좋은 웹페이지 즐겨찾기