《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 ...
随机推荐
- WEB API系列（一）：WEB API的适用场景、第一个实例
在我前一篇博客中已经给各位简单介绍了HTTP协议与RestFul API的关系,以及一些基本的HTTP协议知识,在这些知识的铺垫下,今天,我们一起来讨论一下WEB API的适用场景,然后写我们第一个W ...
- Vue-admin工作整理（七）：路由的切换动效
思路就是通过 transition-group 这个组件来对多组件进行控制,效果是通过样式来写,transition-group要有指定的key值,样式中通过name来命名类的名字 <templ ...
- InstallShield Limited Edition for Visual Studio 使用
首先到https://info.flexerasoftware.com/IS-EVAL-InstallShield-Limited-Edition-Visual-Studio填写信息: 完成之后跳转到 ...
- js switch 字符串
//字符串var day="dd";switch (day){case "dd": x="day it's dd"; break;case ...
- 括号生成(Java实现)
题目: 给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n =3,生成结果为: [ "((()))", "(()( ...
- [大数据面试题]storm核心知识点
1.storm基本架构 storm的主从分别为Nimbus.Supervisor,工作进程为Worker. 2.计算模型 Storm的计算模型分为Spout和Bolt,Spout作为管口.Bolt作为 ...
- R代码展示各种统计学分布 | 生物信息学举例
二项分布 | Binomial distribution 泊松分布 | Poisson Distribution 正态分布 | Normal Distribution | Gaussian distr ...
- Back To Top
//scroll to top (function ($) { $.fn.backTop = function () { var backBtn = this; var position = 1000 ...
- HBase表数据的转移之使用自定义MapReduce
目标:将fruit表中的一部分数据,通过MR迁入到fruit_mr表中 Step1.构建ReadFruitMapper类,用于读取fruit表中的数据 package com.z.hbase_mr; ...
- windows+Apache+mod_wsgi+flask部署笔记
windows是用的2008 server 64位. 照着网上教程即可:https://www.jianshu.com/p/0aa1c7097976 但是有个问题: Apache2.4怎么配置???跟 ...