【javascript之Dom编程艺术】六
<!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);

效果图:


阅读更多
个人分类: web前端/js
想对作者说点什么? 我来说一句

JavaScript+DOM编程艺术.pdf

2016年09月03日 25.59MB 下载

没有更多推荐了,返回首页

不良信息举报

【javascript之Dom编程艺术】六

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭