《JavaScript Dom 编程艺术》读书笔记-第10章
用JS实现动画~内容包括：
1. 动画基础知识
2. 用动画丰富网页的浏览效果
动画就是让元素的位置随时间而不断变化。
位置：
//CSS
element{
position:absolute;
top: 50px;
left: 100px;
}
//dom
elem.style.position="absolute";
elem.style.left="400px";
elem.style.top="20px";
position
默认值：static
可能的值：absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定；fixed，生成绝对定位的元素，相对于浏览器窗口进行定位；relative，生成相对定位的元素，相对于其正常位置进行定位，因此，"left:20" 会向元素的 LEFT 位置添加 20 像素；static，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
时间
JavaScript函数setTimeout能够让某个函数在经过一段时间之后才开始执行。
setTimeout("function",interval)
让页面上的文字移动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="message">Whee!</p>
<script src="1.js"></script>
</body>
</html>
function positionMessage(){
if (!document.getElementById)
{
return false
}
var elem=document.getElementById("message");
elem.style.position="absolute";
elem.style.left="400px";
elem.style.top="20px";
movement=setTimeout("moveMessage()",5000);
}
function moveMessage(){
if (!document.getElementById) return false;
if (!document.getElementById("message")) return false;
var elem=document.getElementById("message");
elem.style.left="200px";
}
如果希望是缓慢移动到目的地：
function moveMessage(){
if (!document.getElementById)
{
return false
}
var elem=document.getElementById("message");
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);
if (xpos==200 && ypos==200){
return true;
}
if (xpos<200)
{
xpos++;
}
if (xpos>200)
{
xpos--;
}
if (ypos>200)
{
ypos--;
}
if (ypos<200)
{
ypos++;
}
elem.style.left=xpos+"px";
elem.style.top=ypos+"px";
movement=setTimeout("moveMessage()",10)
}
抽象化：
function moveElement(element_ID,final_x,final_y,interval){
if (!document.getElementById)
{
return false
}
var elem=document.getElementById(element_ID);
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";
var repeat="moveElement('"+element_ID+"','"+final_x+"','"+final_y+"','"+interval+"')"
elem.movement=setTimeout(repeat,interval)
}
实用的动画：
W3C在它们的Web Content Accessibility Guidelines（web内容可访问性指南）中给出建议：“除非浏览器允许用户冻结移动着的内容，否则就应该避免让内容在网页中移动。（优先级2）。如果网页上有移动着的内容，就应该用脚本或插件的机制允许用户冻结这种移动或动态的更新行为。”
这里的关键在于用户能不能控制，解决了这个问题，根据用户行为移动一个页面元素可能起到增强网页的效果。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web design</title>
<link rel="stylesheet" href="2.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="presatation.html"> Presatation </a>
</li> <li><a href="behavior.html"> Behavior </a>
</li> </ol> <!-- <div id="slideshow"> <img src="1.jpg" alt="building blocks of web design" id="preview" /> </div> --> <script src="moveElement.js"></script>
<script src="2.js"></script>
</body>
</html>
希望为每个链接添加一个预览图片：
CSS的overflow 属性用来处理一个元素的尺寸超出其容器尺寸的情况。当一个元素包含的内容超过自身大小时，就会发生内容移除，这种情况你可以对内容进行“剪裁”，只让一部分内容可见。还可以通过overflow属性告诉浏览器是否需要显示滚动条，以便让给用户能够看到内容的其余部分。
overflow的属性可取值有4种：visible，hidden，scroll和auto
visible：不剪裁溢出的内容
hidden：隐藏溢出的内容
scroll：类似hidden，但显示一个滚动条以便让用户能够滚动看到全部内容。
auto：类似scroll，但浏览器只在确实发生溢出时才显示滚动条。内容没有溢出就不显示。
function prepareSlideShow(){
//确保浏览器支持JavaScript
if (!document.getElementsByTagName)
{
return false;
}
if (!document.getElementById)
{
return false;
}
//确保元素存在
if (!document.getElementById("preview"))
{
return false;
}
if (!document.getElementById("linklist"))
{
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 list=linklist.getElementsByTagName("a");
//为每次的onmouseover提供动画效果
for (var i=0;i<list.length ;i++ )
{
list[i].index=i+1
list[i].onmouseover=function(){
var left=-parseInt(this.index)*100;
moveElement("preview",left,0,1)
}
}
}
如果把鼠标在链接之间快速移动，出现混乱的解决方案。以及改进动画效果。
function moveElement(element_ID,final_x,final_y,interval){
if (!document.getElementById)
{
return false
}
var elem=document.getElementById(element_ID);
if (elem.movement)
{
clearTimeout(elem.movement);
}
//方法一
//if (!elem.style.left||!elem.style.top)
//{
// return false；
//}
//方法二
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((ypos-final_y)/10)
ypos=ypos-dist;
}
if (ypos<final_y)
{
var dist=Math.ceil((final_y-ypos)/10)
ypos=ypos+dist;
}
elem.style.left=xpos+"px";
elem.style.top=ypos+"px";
var repeat="moveElement('"+element_ID+"','"+final_x+"','"+final_y+"','"+interval+"')"
elem.movement=setTimeout(repeat,interval)
}
<div id="slideshow"> <img src="1.jpg" alt="building blocks of web design" id="preview" /> </div>
只为了图片显示而存在，对于没有js支持的浏览器，以上内容有点多余。不如用js来生成它。
function prepareSlideShow(){
var slideshow=document.createElement("div");
slideshow.setAttribute("id","slideshow");
var preview=document.createElement("img");
preview.setAttribute("id","preview");
preview.setAttribute("src","1.jpg");
preview.setAttribute("alt","building blocks of web design");
slideshow.appendChild(preview);
var linklist=document.getElementById("linklist");
insertAfter(slideshow,linklist)
//确保浏览器支持JavaScript
if (!document.getElementsByTagName)
{
return false;
}
if (!document.getElementById)
{
return false;
}
//确保元素存在
if (!document.getElementById("preview"))
{
return false;
}
if (!document.getElementById("linklist"))
{
return false;
}
// 得到所有连接
//var linklist=document.getElementById("linklist");
var list=linklist.getElementsByTagName("a");
//为每次的onmouseover提供动画效果
for (var i=0;i<list.length ;i++ )
{
list[i].index=i+1
list[i].onmouseover=function(){
var left=-parseInt(this.index)*100;
moveElement("preview",left,0,1)
}
}
}
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode
if (parent.lastChild==targetElement)
{
parent.appendChild(newElement);
}else
parent.insertBefore(newElement,targetElement.nextSibling)
}
总结：
这章对动画进行了定义：随时间的变化而改变某个元素在浏览器窗口的显示位置。
《JavaScript Dom 编程艺术》读书笔记-第10章的更多相关文章
- JavaScript DOM编程艺术 - 读书笔记1-3章
1.JavaScript语法 准备工作 一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head& ...
- JavaScript DOM编程艺术 读书笔记
2. JavaScript语法 2.1 注释 HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...
- JavaScript DOM编程艺术读书笔记(四)
第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...
- JavaScript DOM编程艺术读书笔记(三)
第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...
- JavaScript DOM编程艺术读书笔记(二)
第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...
- JavaScript DOM编程艺术读书笔记(一)
第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML( ...
- JavaScript DOM编程艺术-学习笔记（第二章）
1.好习惯从末尾加分号:开始 2.js区分大小写 3.程序界万能的命名法则:①不以,数字开头的数字.字母.下划线.美元符号 ②提倡以下划线命名法来命名变量,以驼峰命名法来命名函数.但是到了公司往往会身 ...
- 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术-学习笔记
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...
随机推荐
- Selenium常见问题
1.使用python打开Chrome浏览器时,出现Chrome正受到自动测试软件的控制的提示 解决: 在浏览器配置里加个参数,忽略掉这个警告提示语,disable_infobars option = ...
- UVA - 11468 (AC自动机+动态规划)
建立AC自动机,把AC自动机当做一张图,在上面跑L个节点就行了. 参考了刘汝佳的代码,发现可能有一个潜在的Bug--如果模式串中出现了没有指定的字符,AC自动机可能会建立出错. 提供一组关于这个BUG ...
- 201806 数据处理 SQL、python、shell 哪家强...速度PK（上篇）
最近在工作中,进行大量的数据处理,使用的是mysql5.7.22,发现当数据量级达到几十万之后,SQL执行速度明显变慢.尤其是当多个表join时,于是就尝试用python pandas进行数据处理,发 ...
- 承接Unity外包 U3D外包 Unity3D外包 小型Unity项目外包用Unity还是UE4
转自mobilehub公众号(ID: mobilehub),作者:屠敏 VR浪潮席卷而来,相对于资本的狂热,现实中真正需要的是有实力的VR硬件研发团队和专业内容制作队伍.对于入门级的开发者而言,游戏引 ...
- T57274 黑暗城堡
传送门 思路: 先求出各个点到 1 的最短路径.分别用两个数组将最短路径记录下来(一个要用来排序).按排序后的 dis 值从小到大枚举各点加入树有多少种方案,最后根据乘法原理把各个点的方案数乘起来就是 ...
- vue中使用动画vue-particles
1.下载依赖 npm install vue-particles --save-dev 2.main.js引入 import Vue from 'vue' import VueParticles fr ...
- Monkey测试log的保存与分析
v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...
- OO第二单元作业总结【自我反思与审视】
第二单元作业的完成史,就是一部心酸的血泪史…… 多线程的出现为我(们)打开一片广阔的天地,我也在这方天地摸爬滚打,不断成长!如果说第一单元之前还对Java语法有所了解的话,那么这单元学习多线程则完全是 ...
- CF-95C-建图+最短路
http://codeforces.com/problemset/problem/95/C n点m边(无向有权),每个点有一个司机(Ti,Ci)表示支付Ci元走Ti长度且必须停在节点才合法,一个司机只 ...
- 不安全代码只会在使用 /unsafe 编译的情况下出现
在你的项目属性页面里面,把是否包含unsafe代码的选项选上