对着月亮唱歌的幸福生活

即便是莲藕内心真空之所，也有根根柔丝穿过。
  博客园  :: 首页  :: 联系 :: 管理

JavaScript学习笔记5.---动画

Posted on 2008-06-30 10:21  对月而歌  阅读(178)  评论(0)    收藏  举报

Web Design

These are the things you should know.

building blocks of web design

***************************************************************
还是通过例子说吧.
下面将是需要做的事情
(photo实在是不会用....过2天求个人帮我弄成好看点的图片)
1,把所有的预览图片合成为一张"集体照"
2,隐藏这张集体照片的绝大部分
3,当用户把鼠标指针悬停在某个连接的上方时,只显示这张图片的一个部分.
首先,把这张照片放到一个容器内,我将把它放入一个div元素
<div id="slideshow" style="width:100px;heght:100px;position:relative;overflow:hidden; ><img src="topics.gif" ></div>
html代码:

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 2"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 4<head>
 5  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 6  <title>Web Design</title>
 7  <style type="text/css" media="screen">
 8    @import url(styles/layout.css);
 9  </style>
10  <script type="text/javascript" src="scripts/addLoadEvent.js">
11  </script>
12  <script type="text/javascript" src="scripts/moveElement.js">
13  </script>
14  <script type="text/javascript" src="scripts/prepareSlideshow.js">
15  </script>
16</head>
17<body>
18  <h1>Web Design</h1>
19  <p>These are the things you should know.</p>
20  <ol id="linklist">
21    <li>
22      <a href="structure.html">Structure</a>
23    </li>
24    <li>
25      <a href="presentation.html">Presentation</a>
26    </li>
27    <li>
28      <a href="behavior.html">Behavior</a>
29    </li>
30  </ol>
31  <div id="slideshow" style="overflow:hidden;">
32    <img src="topics.gif" alt="building blocks of web design" id="preview" />
33  </div>
34</body>
35</html>
36
2.JavaScript代码:
主要用了这样几个函数:
 1//moveMessage函数,完成移动的过程,设置目的地的左位置,上位置,和俩次移动之间的停顿时间,做一些浏览器有效性的判断
 2function moveElement(elementID,final_x,final_y,interval) {
 3  if (!document.getElementById) return false;
 4  if (!document.getElementById(elementID)) return false;
 5  var elem = document.getElementById(elementID);
 6  if (elem.movement) {
 7    clearTimeout(elem.movement);
 8  }
 9  if (!elem.style.left) {
10    elem.style.left = "0px";
11  }
12  if (!elem.style.top) {
13    elem.style.top = "0px";
14  }
15  var xpos = parseInt(elem.style.left);
16  var ypos = parseInt(elem.style.top);
17  if (xpos == final_x && ypos == final_y) {
18    return true;
19  }
20  if (xpos < final_x) {
21    var dist = Math.ceil((final_x - xpos)/10);
22    xpos = xpos + dist;
23  }
24  if (xpos > final_x) {
25    var dist = Math.ceil((xpos - final_x)/10);
26    xpos = xpos - dist;
27  }
28  if (ypos < final_y) {
29    var dist = Math.ceil((final_y - ypos)/10);
30    ypos = ypos + dist;
31  }
32  if (ypos > final_y) {
33    var dist = Math.ceil((ypos - final_y)/10);
34    ypos = ypos - dist;
35  }
36  elem.style.left = xpos + "px";
37  elem.style.top = ypos + "px";
38  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
39  elem.movement = setTimeout(repeat,interval);
40}
41
 1//3.addLoadEvent(prepareSlideshow);  前面已经说过了
 2//4.insertAfter();前面已经说了
 3//5.prepareSlideshow() ; 主函数
 4function prepareSlideshow() {
 5// Make sure the browser understands the DOM methods
 6  if (!document.getElementsByTagName) return false;
 7  if (!document.getElementById) return false;
 8// Make sure the elements exist
 9  if (!document.getElementById("linklist")) return false;
10  if (!document.getElementById("preview")) return false;
11// Apply styles to the preview image
12  var preview = document.getElementById("preview");
13  preview.style.position = "absolute";
14  preview.style.left = "0px";
15  preview.style.top = "0px";
16// Get all the links in the list
17  var list = document.getElementById("linklist");
18  var links = list.getElementsByTagName("a");
19// Attach the animation behavior to the mouseover event
20  links[0].onmouseover = function() {
21    moveElement("preview",-100,0,10);
22  }
23  links[1].onmouseover = function() {
24    moveElement("preview",-200,0,10);
25  }
26  links[2].onmouseover = function() {
27    moveElement("preview",-300,0,10);
28  }
29}
30addLoadEvent(prepareSlideshow);