《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 ...
随机推荐
- tp引入header文件~
- layer结合art实现弹出功能
模板 <!-- 模板 --> <script id="render-tpl" type="text/html"> <table c ...
- HDU 1024 Max Sum Plus Plus（DP的简单优化）
Problem Description Now I think you have got an AC in Ignatius.L's "Max Sum" problem. To b ...
- (6)tcp-socket
(1)client端口: import socket# 产生一个socket对象sk = socket.socket()# 建立连接sk.connect( ("127.0.0.1" ...
- vi编程技巧:
h #向上j #向左k #向右l #向下a #插入o #插入一行,并在行首开始O #在当前行前插入一行,并在行首开始dd #删除当前行x #删除当前字符yy #复制当前行p #在当前行后面粘贴P #在 ...
- Matlab - 基础知识
Matlab R2016a完全自学一本通 记在前面: (1)函数中:dim=1 按列:dim=2 按行 (2)这本书很垃圾,不建议买. (3)在数据库连接中,用两个单引号表示字符串,千万不能用双引号 ...
- WARING
每一道题都先手玩样例! 认真读一下每一档数据,仔细计算每一档可以拿的分数! 读完题目后,把所有能想到的思路写在纸上. 最优化题目考虑dp和贪心两种方法 字符串题目前缀考虑trie树,后缀考虑fail树 ...
- 2018 HDU多校第三场赛后补题
2018 HDU多校第三场赛后补题 从易到难来写吧,其中题意有些直接摘了Claris的,数据范围是就不标了. 如果需要可以去hdu题库里找.题号是6319 - 6331. L. Visual Cube ...
- 某mac最简单调节亮度
说明 mac用户其实都可以使用 背景 很多人都说需要打补丁啊,或者修改什么的,我试过不管用.不如通过软件调节.. 正文 从appstore下载 Brightness Slider 即可,虽然不能达到系 ...
- go生成不重复的纯数字6位的随机数
最近在学go, 按照入门指南学完go的基础语法, 开始学习go的标准库; 借用生成这个小任务复习一下go的基础语法. 推荐go编辑, jb公司的goland, 超级好用. 推荐go入门指南, htt ...