将动画效果用于网页制作

来源：互联网发布：windows平板镜像下载编辑：程序博客网时间：2024/05/19 17:07

例子：

1）html

<!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>Web Design</title><link rel="stylesheet" href="styles/layout.css" media="screen"/><script src="scripts/addLoadEvent.js"></script><script src="scripts/moveElement.js"></script><script src="scripts/prepareSlideshow.js"></script></head><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><div id="slideshow"><img src="images/topics.jpg" alt="building blocks of web design" id="preview"/></div></body></html>

2）css

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

3)js

①

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

②

function prepareSlideshow(){var preview=document.getElementById("preview");preview.style.position="absolute";preview.style.left="0px";preview.style.top="0px";var list=document.getElementById("linklist");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);

③

//移动元素的函数function moveElement(elementID,final_x,final_y,interval){if(!document.getElementById){//检查浏览器是否支持这个方法return false;}if(!document.getElementById(elementID)){//检查浏览器是否支持这个方法return false;}if(!elem.style.left){//如果这个元素的style.left属性未设置elem.style.left="0px";//设置左边距为0px}if(!elem.style.top){//如果这个元素的style.top属性未设置elem.style.top="0px";//设置上边距为0px}var elem=document.getElementById(elementID);//获取这个元素if(elem.movement){//清除掉setTimeout队列中的事件clearTimeout(elem.movement);}var xpos=parseInt(elem.style.left);//提取整数var ypos=parseInt(elem.style.top);//提取整数var dist=0;if(xpos==final_x&&ypos==final_y){//如果已经位于指定位置，返回return true;}if(xpos<final_x){//当前位置小于指定位置dist=Math.ceil((final_x-xpos)/10);//实现离得越远移动越快的效果xpos+=dist;}if(xpos>final_x){dist=Math.ceil((xpos-final_x)/10);xpos-=dist;}if(ypos<final_y){dist=Math.ceil((final_y-ypos)/10);ypos+=dist;}if(ypos>final_y){dist=Math.ceil((ypos-final_y)/10);ypos-=dist;}elem.style.left=xpos+"px";//设置style.left，需要加上“px”elem.style.top=ypos+"px";var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";elem.movement=setTimeout(repeat,interval);//重复调用，movement如果是全局变量可能会带来一些问题}addLoadEvent(moveElement);

进一步改进：

可以把创建div元素、img元素的html代码全部放到js里，代码：

var div_elem=document.createElement("div");div_elem.setAttribute("id","slideshow");var img_elem=document.createElement("img");img.setAttribute("src","images/topics.jpg");img.setAttribute("alt","building blocks of web design");img.setAttribute("id","preview");div_elem.appendChild(img_elem);var list=document.getElementById("linklist");insert(div_elem,list);

其中insertAfter是这样实现的：

function insertAfter(newElement,targetElement){var parent=targetElement.parentNode;if(parent.lastChild==targetElement){parent.appendChild(newElement);}else{parent.insertBefore(newElement,targetElement.nextSibling);}}

写这篇文章的时候不知道搞出了什么bug=。=

阅读全文

0 0