1 次
Javascript学习第二季-实战9

来源：本站原创编辑：admin 时间：2008年10月14日浏览：
Javascript学习第二季（实战9）  
 
    上一个 javascript图片馆，动画速度太慢，这次我们将它改进。  
      
 
Demo1：  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  <title>test</title> 
  <style type="text/css" media="screen"> 
 #slideshow {  
  width: 100px;  
  height: 100px;  
  position: relative;  
  overflow: hidden;  
}  
#preview {  
  position: absolute;  
}  
  </style> 
  <script type="text/javascript"> 
  /*  
  这是最终优化的例子.  
  */  
  function addLoadEvent(func) {  
  var oldonload = window.onload;  
  if (typeof window.onload != 'function') {  
    window.onload = func;  
  } else {  
    window.onload = function() {  
      oldonload();  
      func();  
    }  
  }  
}  
 
//js有insertBefore方法，但没有insertAfter方法，我们自己写一个。  
/*  
参数解释：  
newElement : 新元素  
targetElement : 目标元素 ， 也就是要插入的地方。  
*/  
function insertAfter(newElement,targetElement) {  
  var parent = targetElement.parentNode;   //目标元素的父节点  
  if (parent.lastChild == targetElement) { //如果父节点的最后一个节点 是目标元素。  
    parent.appendChild(newElement);        //那么 直接 appendchild。  因为appendchild默认就是添加到最后。  
  } else {  
    parent.insertBefore(newElement,targetElement.nextSibling);  
    //反之，插入到目标元素的下一个兄弟节点的 前面。  
    //也就是目标元素的后面。。。^_^  
  }  
}  
 
/*  
参数解释:  
elementID : 元素的ID  
final_x : 最后的x坐标的值。  
final_y : 最后的y坐标的值。  
interval : 时间间隔。 （建议 取 10或者20）  
*/  
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) {//demo3 已经说明了原因。可以去看看  
    clearTimeout(elem.movement);  
  }  
  if (!elem.style.left) {    //如果没有设置left属性，  
    elem.style.left = "0px";  
  }  
  if (!elem.style.top) {  
    elem.style.top = "0px";  
  }  
  var xpos = parseInt(elem.style.left);// 转换成 整数。也就是去掉 px  
  var ypos = parseInt(elem.style.top);  
  if (xpos == final_x && ypos == final_y) {  
    return true;  
  }  
  /*  
   在前面的例子中，都是通过 xpos++ 来偏移。  
   不过速度太慢。这次我们改大点。  
   通过最后的位置 减去 初始位置   然后除以 10 ，得到每次的偏移量。  
   效果是 先快后慢。  
  */  
  if (xpos < final_x) {  
    var dist = Math.ceil((final_x - xpos)/10);  
    xposxpos = xpos + dist;  
    /*  
    解释一下  Math.ceil()方法：  
    对一个数进行上舍入。参数必须是一个数值。  
    什么是上舍入?  
    比如 0.2  
    如果 Math.ceil(0.2);  
    则得到  2  。  
    */  
  }  
  if (xpos > final_x) {  
    var dist = Math.ceil((xpos - final_x)/10);  
    xposxpos = xpos - dist;  
  }  
  if (ypos < final_y) {  
    var dist = Math.ceil((final_y - ypos)/10);  
    yposypos = ypos + dist;  
  }  
  if (ypos > final_y) {  
    var dist = Math.ceil((ypos - final_y)/10);  
    yposypos = ypos - dist;  
  }  
  elem.style.left = xpos + "px";// 这里注意把单位 加上  
  elem.style.top = ypos + "px";  
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";  
      /*  
  提醒下;  
  setTimeout 第一个参数是 字符串， 第二个参数是 数值。  
  */  
  elem.movement = setTimeout(repeat,interval);  
  //至于为什么是   elem.movement 而不是 直接  movement 。 demo3 已经做过介绍。  
}  
 
 
function prepareSlideshow() {  
   // 判断浏览器是否支持这些方法。  
  if (!document.getElementsByTagName) return false;  
  if (!document.getElementById) return false;  
   // 判断这些元素是否存在。  
  if (!document.getElementById("linklist")) return false;  
  //demo3中是直接写在html中，因为那段html是就只是为了切换图片而工作。  
  //所以把那段代码移到js里来，也未尝不可。  
  //下面的代码是创建一段html代码。  
  /* 等价于：  
  <div id="slideshow"> 
    <img src="topics.gif" alt="test" id="preview" /> 
   </div> 
  */  
  var slideshow = document.createElement("div");  
  slideshow.setAttribute("id","slideshow");  
  var preview = document.createElement("img");  
  preview.setAttribute("src","topics.gif");  
  preview.setAttribute("alt","test");  
  preview.setAttribute("id","preview");  
  slideshow.appendChild(preview);//注意： 创建完后，必须appendChild给某个元素 或者 insertBefore 某个地方.  
 
  var list = document.getElementById("linklist");  
  insertAfter(slideshow,list);// 调用insertAfter 函数  
 
  var links = list.getElementsByTagName("a");  
 
  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);  
  }  
 
}  
addLoadEvent(prepareSlideshow);  
 
  </script> 
   
</head> 
<body> 
 
  <ol id="linklist"> 
    <li> 
      <a href="#">AAAAAAA</a> 
    </li> 
    <li> 
      <a href="#">BBBBBBBB</a> 
    </li> 
    <li> 
      <a href="#">CCCCCCC</a> 
    </li> 
  </ol> 
 
</body> 
</html> 
 
 
如果你是一名jquery的爱好着，想要用jquery写出类似的效果，  
可以参考下面的代码：  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=gbk" /> 
  <title>Animation</title> 
  <script src="../jquery.js" type="text/javascript"></script> 
 <style type="text/css" media="screen"> 
 #slideshow {  
  width: 100px;  
  height: 100px;  
  position: relative;  
  overflow: hidden;  
}  
#preview {  
  position: absolute;  
}  
  </style> 
    
  <SCRIPT LANGUAGE="JavaScript"> 
    $(function(){  
           $('<div id="slideshow"><img src="topics.gif" alt="test" id="preview"/></div>').appendTo('body')  
           .find('#preview').css({'left':'0px','top':'0px'});  
             
          $('#linklist li a').eq(0).mouseover(function(){  
               $('#preview').animate({ left : -100  }, { queue : false , duration : 'normal'});  
          })  
          $('#linklist li a').eq(1).mouseover(function(){  
               $('#preview').animate({ left : -200  }, { queue : false , duration : 'normal'});  
          })  
          $('#linklist li a').eq(2).mouseover(function(){  
               $('#preview').animate({ left : -300  }, { queue : false , duration : 'normal'});  
          })   
   
    })  
  </SCRIPT> 
 
</head> 
<body> 
 
  <ol id="linklist"> 
    <li> 
      <a href="#">AAAAAAA</a> 
    </li> 
    <li> 
      <a href="#">BBBBBBBB</a> 
    </li> 
    <li> 
      <a href="#">CCCCCCC</a> 
    </li> 
  </ol> 
 
</body> 
</html> 
 
终于 我们的第二个 产品出炉了。  
这是我们的第二个 图片馆，效果是不是非常之cool。  
想必大家都在为这几天的辛勤劳动 而获得的成果而喜悦。  
 
好了，就说到这里了，满累的。。。  
 
我们的 第二季 实战  就说到这里了。  
你如果觉得不够，可以自己想些例子，然后自己写代码去实现。  
 
祝好运。
本站解压密码：www.web265.com
Tags:0
上一篇：Javascript学习第二季（实战8）
下一篇：js中类的基本概念-1
赞助商友情链接

站长常用工具

#Title
返回首页

Javascript学习第二季-实战9

赞助商友情链接

站长常用工具

相关文章
