关闭

javascript之Dom编程艺术六

92人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<link href="css/style.css" rel="stylesheet" type="text/css" /> 
	<script type="text/javascript" src="js/myjs.js" language="uft-8"></script>
	<title>无标题文档</title>
</head>

<body>
	<h1>Web Design</h1>
	<p>These are the things you should konw.</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 id="preview" src="image/0.jpg"/>	
	</div>
</body>
</html>


/* CSS Document */
#slideshow{
	width:100px;
	height:100px;
	position:relative;
	ovenflow:hidden;
}

// JavaScript Document
// JavaScript Document
// 如果原来有要加载的函数 就先加进来 否则加入新函数
function addLoadEvent(func){
  var oldfunc=window.onload;
  if(typeof oldfunc !='function'){
	  window.onload =func;
  }else{
	  window.onload=function(){
		oldfunc();
		func();
	  }
  }
}

//移动message的位置
function moveMessage(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){
		xpos ++;
	}
	if(xpos > final_x){
	    xpos --;
	}
	if(ypos > final_y){
		ypos --;
	}
	if(ypos < final_y){
	    ypos ++;
	}
	elem.style.left = xpos+"px";
	elem.style.top  = ypos+"px";
	var repeat = "moveMessage('"+elementID+"',"+final_x+","+final_y+","+interval+")";
	elem.movement=setTimeout(repeat,interval);
	
}

function prepareSlideshow(){
  // if(!document.getElementsByTagName) return false;
   if(!document.getElementById) return false;
   if(!document.getElementById("linklist")) return false;
   if(!document.getElementById("preview")) return false;
   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(){
	  moveMessage("preview",100,0,10);   
   }
   links[1].onmouseover=function(){
	  moveMessage("preview",200,0,10);  
   }
   links[2].onmouseover=function(){
	  moveMessage("preview",300,0,10);  
   }
}
addLoadEvent(prepareSlideshow);

效果图:


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:41751次
    • 积分:1844
    • 等级:
    • 排名:千里之外
    • 原创:143篇
    • 转载:55篇
    • 译文:0篇
    • 评论:0条