JavaScript DOM编程艺术—幻灯片动画

鼠标接触网页链接时，图片会移动的动画

目录结构

注：top.gif图片为400*100px的。

list.html

<!doucment html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Web Design</title>
  <link rel="stylesheet" href="layout.css" media="screen" />
</head>
<body>
  <h1>Web Design</h1>
  <p>There are the things you should know</p>
  <ol >
    <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>
  <div >
    <image src="topic.gif"  />
  </div>

  <script src="addLoadEvent.js"></script>
  <script src="moveElement.js"></script>
  <script src="prepareSlideshow.js"></script>
</body>
</html>

layout.css

#slideshow{
  width:100px;
  height:100px;
  position:relative;
  overflow:hidden;
}

addLoadEvent.js

function addLoadEvent(func){
  var oldonload = window.onload;
  if(typeof window.onload != 'function'){
    window.onload = func;
  }
  else{
    window.onload = function(){
      oldonload();
      func();
    }
  }
}

prepareSlideshow.js

/*幻灯片准备函数*/
function prepareSlideshow(){
  var preview = document.getElementById('preview');
  preview.style.position = "absolute";
  preview.style.left = "0px";
  preview.style.top = "0px";
  var linklist = document.getElementById('linklist');
  var links = linklist.getElementsByTagName('a');

  links[0].onmouseover = function(){
    moveElement("preview",-100,0,1);
  }
  links[1].onmouseover = function(){
    moveElement("preview",-200,0,1);
  }
  links[2].onmouseover = function(){
    moveElement("preview",-300,0,1);
  }
}
addLoadEvent(prepareSlideshow);

moveElement.js

/*
将移动元素函数抽象
参数：元素，水平目的位置，垂直目的位置，时间间隔
*/
function moveElement(elementID,end_x,end_y,interval){
  var elem = document.getElementById(elementID);
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if(elem.movement){
    clearTimeout(elem.movement);
  }
  if(xpos == end_x &&ypos == end_y){
    return true;
  }
  /*越靠近目的地速度越慢*/
  if(xpos < end_x){
    dist = Math.ceil((end_x-xpos)/10);
    xpos = xpos + dist;
  }
  if(xpos > end_x){
    dist = Math.ceil((xpos - end_x)/10);
    xpos = xpos - dist;
  }
  if(ypos < end_y){
    dist = Math.ceil((end_y-ypos)/10);
    ypos = ypos + dist;
  }
  if(ypos > end_y){
    dist = Math.ceil((ypos - end_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveMessage('"+elementID+"',"+end_x+","+end_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}

秒客网

JavaScript DOM编程艺术—幻灯片动画

相关文章