JavaScript DOM编程艺术—幻灯片动画

最新推荐文章于 2024-03-09 08:45:00 发布

码动传奇

最新推荐文章于 2024-03-09 08:45:00 发布

阅读量656

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u013806814/article/details/50001879

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

鼠标接触网页链接时，图片会移动的动画

目录结构

注：top.gif图片为400*100px的。

list.html

<!doucment html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Web Design</title>
	<link rel="stylesheet" href="layout.css" media="screen" />
</head>
<body>
	<h1>Web Design</h1>
	<p>There 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">
		<image src="topic.gif" id="preview" />
	</div>
	
	<script src="addLoadEvent.js"></script>
	<script src="moveElement.js"></script>
	<script src="prepareSlideshow.js"></script>
</body>
</html>

layout.css

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

addLoadEvent.js

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

prepareSlideshow.js

/*幻灯片准备函数*/
function prepareSlideshow(){
	var preview = document.getElementById('preview');
	preview.style.position = "absolute";
	preview.style.left = "0px";
	preview.style.top = "0px";
	var linklist = document.getElementById('linklist');
	var links = linklist.getElementsByTagName('a');
	
	links[0].onmouseover = function(){
		moveElement("preview",-100,0,1);
	}
	links[1].onmouseover = function(){
		moveElement("preview",-200,0,1);
	}
	links[2].onmouseover = function(){
		moveElement("preview",-300,0,1);
	}
}
addLoadEvent(prepareSlideshow);

moveElement.js

/*
将移动元素函数抽象
参数：元素，水平目的位置，垂直目的位置，时间间隔
*/
function moveElement(elementID,end_x,end_y,interval){
	var elem = document.getElementById(elementID);
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	if(elem.movement){
		clearTimeout(elem.movement);
	}
	if(xpos == end_x &&ypos == end_y){
		return true;
	}
	/*越靠近目的地速度越慢*/
	if(xpos < end_x){
		dist = Math.ceil((end_x-xpos)/10);
		xpos = xpos + dist;
	}
	if(xpos > end_x){
		dist = Math.ceil((xpos - end_x)/10);
		xpos = xpos - dist;
	}
	if(ypos < end_y){
		dist = Math.ceil((end_y-ypos)/10);
		ypos = ypos + dist;
	}
	if(ypos > end_y){
		dist = Math.ceil((ypos - end_y)/10);
		ypos = ypos - dist;
	}
	elem.style.left = xpos + "px";
	elem.style.top = ypos + "px";
	var repeat = "moveMessage('"+elementID+"',"+end_x+","+end_y+","+interval+")";
	elem.movement = setTimeout(repeat,interval);
}