(DOM艺术) 实用的动画

前面用js实现了移动效果(书前面233)，这里用移动效果实现：
三个链接，光标移动到哪个链接，显示那个图片。书上面的实现思路比较好，用一张大图片包含三个要显示的图案区域，光标移动到哪里，就显示特定区域的图片。因为如果用三个图片，加载图片也是要时间的，当图片数量多了效果就明显了。这里就是一个优化的技巧。100*300图片，100*100的显示区域，光标移动，移动图片把该显示的部分移动到显示区域就行了，
将函数抽象化，变成“通用函数”
变量作用域问题：当用户鼠标的速度来回移动速度够快，积累在 setTimeout队列里的事件就会导致动画效果产生滞后。为了消除动画滞后的现象，可以用clearTimeout函数清除积累在setTimeout队列里的事件。根据分析这里的movement既不能使用全局变量也不能使用局部变量。用只与某个特定元素有关的变量的“属性”。JS也允许我们创建属性。这样我们把变量movement从一个全局变量改变为正在被移动的那个元素(elem元素)的属性。这样一来，既可以测试它是否已经存在，并在它已经存在的情况下使用clearTimeout函数了。每次执行移动前，如果存在这个一个属性，就清除。这样一来，即使用户快速移动鼠标指针而使得某个元素需要向不同的方向移动，实际执行的也只有一条setTimeout函数调用语句。
改进动画效果：远则移动快，近则慢
**如果把position属性值是absolute的元素A放入一个position属性值是relative的元素B，B就成为A的容器元素，而A将在B的显示区域里按absolute方式进行摆放。
完全分离：如果用户压根没有启用JS支持，div和img元素纯粹是为了动画效果才塞进来的，既然如此，与其硬塞进文档还不如用js生成HTML 图片区域。
改进，可以用css实现一些更精彩的效果

代码部分：

list.html:

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Web Design</title><style type="text/css" media="screen">@import url(styles/layout.css);</style><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/insertAfter.js"></script><script type="text/javascript" src="scripts/moveElement.js"></script><script type="text/javascript" src="scripts/prepareSlideshow.js"></script>
</head>
<body><h1>Web Design</h1><p>These 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>
</body>
</html>

prepareSlideshow.js:

function prepareSlideshow() {
// Make sure the browser understands the DOM methodsif (!document.getElementsByTagName) return false;if (!document.getElementById) return false;
// Make sure the elements existif (!document.getElementById("linklist")) return false;var slideshow = document.createElement("div");slideshow.setAttribute("id","slideshow");var preview = document.createElement("img");preview.setAttribute("src","topics.gif");preview.setAttribute("alt","building blocks of web design");preview.setAttribute("id","preview");slideshow.appendChild(preview);var list = document.getElementById("linklist");insertAfter(slideshow,list);
// Get all the links in the listvar links = list.getElementsByTagName("a");
// Attach the animation behavior to the mouseover eventlinks[0].onmouseover = function() {moveElement("preview",-100,0,10);}links[1].onmouseover = function() {moveElement("preview",-200,0,10);}links[2].onmouseover = function() {moveElement("preview",-300,0,10);}
}
addLoadEvent(prepareSlideshow);

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);if (xpos == final_x && ypos == final_y) {return true;}if (xpos < final_x) {var dist = Math.ceil((final_x - xpos)/10);xpos = xpos + dist;}if (xpos > final_x) {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 (ypos > final_y) {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);
}

insertAfter.js:

function insertAfter(newElement,targetElement) {var parent = targetElement.parentNode;if (parent.lastChild == targetElement) {parent.appendChild(newElement);} else {parent.insertBefore(newElement,targetElement.nextSibling);}
}

addLoadEvent.js:

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

layout.css:

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

转载于:https://www.cnblogs.com/zhangmingzhao/p/7674220.html

(DOM艺术) 实用的动画相关推荐

Android实用视图动画及工具系列之三：表情加载动画和失败加载动画，人物加载动画
实现效果功能说明网速慢时,加载网络数据时,界面怎么处理才美观?载入失败或网络丢包时,如何让界面显得更和谐?这一直是开发人员和美工人员不绝于耳的问题,为了达到功能和UI的完美交互,我们不得不做一些基 ...
如何使用mtPaint制作像素艺术和GIF动画
如果有诸如Rescue先生和Do n't Be Patchman (世界上第一个,也是唯一的SteamOS独家)之类的独立游戏展示的一件事,那就是复古很热. 具体来说,像素艺术很热. 开发人员之所以喜 ...
JavaScript一线大厂面试秘籍：面向对象+dom\bom+事件+特性\动画+面试题+基础
JavaScript(简称"JS")是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言.虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中, ...
[UWP]抄抄《CSS 故障艺术》的动画
1. 前言什么是故障艺术(Glitch Art 风)?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式.它有一种魔幻的感觉,看起来具有闪烁.震动的效果,很吸引人眼球.故障艺术它模拟了画面信号 ...
html如何制作艺术字体,影视动画制作软件怎么制作多彩立体字艺术字体制作软件字体渐变效果...
大家好,Aeolus又给大家讲课了,昨天我们讲了影视动画制作软件怎么加文字效果非常好,一个晚上浏览量就突破几百个人了,这个数字对于网络文图讲解的教程是一个不错的成绩,软件下载量达到了浏览量的89% 小 ...
Android实用技巧.动画效果（二）
LayoutAnimationController实现子布局进入动画效果以listView为例设置item进入动画: 首先设置list界面 <?xml version="1.0&qu ...
javascript DOM艺术
一.DOM基础 1.节点(node)层次 Document--最顶层的节点,所有的其他节点都是附属于它的. DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现 ...
介绍简单实用APP动画效果的两个关键
编者按:动效化显然已成为移动互联网产品的新趋势,如何设计出有趣且吸引人的动效已成为设计师们的新课题.不同的产品适合不同类型的动效,有些产品适合炫酷的动效,有些则不适合.切记不要把动效设计成华而不实的花 ...
JavaScript DOM编程艺术（第二版）
JavaScript DOM编程艺术简要介绍第二章: JavaScript语法语法语句注释变量数据类型数组对象操作条件语句比较操作符逻辑操作符循环语句 while循环 for ...

(DOM艺术) 实用的动画

(DOM艺术) 实用的动画相关推荐

最新文章

热门文章