《JavaScript DOM编程艺术》第十章用javascript实现动画效果

最新推荐文章于 2022-10-05 17:14:21 发布

Cziker

最新推荐文章于 2022-10-05 17:14:21 发布

阅读量567

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Cziker/article/details/84584813

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现移动图片效果，当鼠标指针悬停在哪个链接上，我们将这个图片向左或者右移动

在这里插入图片描述

HTML 代码块

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>预览图片</title>
	<style type="text/css">
	#slideshow{
        width: 120px;
	 	height: 150px;
	 	overflow: hidden;
	 	position: relative;
	  }
	</style>
</head>
<body>
	<h1>Web Design</h1>
	<p>these 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="behaior.html">Behaior</a></li>
	</ol>
	<div id="slideshow">
		<img src="images/1.png" alt="builting blocks of web desight"  id="preview" />
	</div>

	 <script type="text/javascript" src="js/addLoadEvent.js"></script>
     <script type="text/javascript" src="js/moveElement.js"></script>
     <script type="text/javascript" src="js/previewSlideshow.js"></script>
</body>
</html>

JS

1、addLoadEvent.js

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

2、moveElement.js

function moveElement(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);
    }
    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";
    //重新调用本函数，Javascript用引号表示字符串，用 “+”号连接字符串
    //moveElement(' 和 elementID 和 ', 和 final_x 和 ,和 final_y 和 , 和 interval 和 ) 
    //拼接以后如下：moveElement('elementID',final_x,final_y,interval); 
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat,interval);
}

3、previewSlideshow.js

function previewSlideshow() {
    if (!document.getElementById)  return false;
    if(!document.getElementById("preview")) return false;
    if (!document.getElementById("linklist"))  return false;
    if (!document.getElementsByTagName) {return false;}
 
	//为图片应用样式
	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");

    //为mouseover事件添加动画
    links[0].onmouseover = function(){
        moveElement("preview",-193,0,10);
    }
    links[1].onmouseover = function(){
        moveElement("preview",-371,0,10);
    }
    links[2].onmouseover = function(){
        moveElement("preview",-548,0,10);
    }
}
addLoadEvent(previewSlideshow);

改进 moveElement.js 实现如果那个元素离目标地较远，就每次进行一大步，较近就进行一小步

function moveElement(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);
    var dist = 0;
    if (xpos == final_x && ypos == final_y) {
    	return true;
    }
    if (xpos < final_x) {
    	var dist = Math.ceil((final_x - xpos)/10); 
    	//每次进行这个距离的十分之一 Math.ceil(number)是返回向"大于"方向舍入为之最接近的整数，
    	//Math.floor(number) 返回向“小于”方向舍入为与之最接近的整数，
    	//Math.round(number) 返回任意舍入为与之最接近的整数
        xpos = xpos + dist;
    }
    if (final_x < xpos) {
    	var dist = Math.ceil((xpos - final_x)/10); 
        xpos = xpos - dist;
    }
    if (ypos < final_y) {
    	var dist = Math.ceil((final_y - ypos)/10); 
        ypos = ypos + dist;
    }
    if (final_y < ypos) {
    	var dist = Math.ceil((ypos - final_y)/10); 
        ypos = ypos - dist;
    }

    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";

    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat,interval);
/*
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat,interval);*/
}