关闭

javascript之Dom编程艺术六

104人阅读 评论(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网站的观点或立场

【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记

经过前一段时间HTML&CSS的学习,感觉视频加读书是一个比较不错的学习方法,两者相辅相成,互相补充,所以也准备看看关于JavaScript的书。       2015年12月14日,之前使用韩顺平老...
  • Creabine
  • Creabine
  • 2015-12-14 21:12
  • 3194

总结一下这几天学的《JavaScript DOM编程艺术 第2版》(1)

整本书都是关于如何 DOM
  • u013236064
  • u013236064
  • 2014-08-11 22:38
  • 1217

《JavaScript DOM编程艺术》学习

JavaScript编程原则和使用习惯  在使用JavaScript之前需思考: 为这个网页增加这种额外的行为是否 确有必要“用户至上” , 这样做会对用户的浏览器产生怎样的影响?浏览器支持Jav...
  • qq_26437925
  • qq_26437925
  • 2016-02-01 20:10
  • 1065

JavaScript DOM编程艺术 学习笔记(六)图片库改进版

图片库这个例子 1。符合平稳退化 Fireworks 即使不支持javaScript 浏览器也会打开href属性给的链接 所以符合了平稳退化 而如果用 即选用...
  • jingqiu880905
  • jingqiu880905
  • 2016-11-08 17:08
  • 272

javascript_DOM 编程艺术学习笔记(六)

javascript_DOM 编程艺术学习笔记(六) 一、元素节点的创建 var pElement = document.createElement("p");  创建了一个标签的元素节点,里面没有任...
  • ssqfzc
  • ssqfzc
  • 2015-11-18 23:05
  • 394

JavaScript DOM编程艺术 附录.pdf

  • 2013-07-30 15:54
  • 3.16MB
  • 下载

JavaScript_DOM编程艺术第二版(中文)

  • 2017-11-10 11:04
  • 109.72MB
  • 下载

JavaScript DOM编程艺术(第2版)-源代码

  • 2017-11-09 15:24
  • 13.51MB
  • 下载

JavaScript DOM编程艺术(第2版)-配套源代码

  • 2017-10-25 14:49
  • 340KB
  • 下载

JavaScript_DOM编程艺术第二版(中文).pdf+官方源码

  • 2017-11-15 15:59
  • 99.98MB
  • 下载
    个人资料
    • 访问:52342次
    • 积分:2141
    • 等级:
    • 排名:千里之外
    • 原创:161篇
    • 转载:62篇
    • 译文:0篇
    • 评论:0条