《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 ...
随机推荐
- WebPack命令执行的时候，其内部处理逻辑是什么
1.首先webpack发现并没有通过命令的形式,给它指定入口和出口 2.向根目录查找“webpack.config.js”配置文件 3.解析这个配置文件,并得到配置文件中导出的配置对象 4.当拿到配置 ...
- PHP——laravel之DB类->查询
DB类之查询: 满足条件的全部获取:DB::table("表名")->where("name",">","1" ...
- Mysql推荐使用规范
一.基础规范 使用InnoDB存储引擎支持事务.行级锁.并发性能更好.CPU及内存缓存页优化使得资源利用率更高 推荐使用utf8mb4字符集无需转码,无乱码风险, 支持emoji表情以及部分不常见汉字 ...
- 【笔记】Nginx热更新相关知识
(以下学习笔记内容均摘自参考链接,仅供个人查阅) 1.inotify文件系统监控特性 Inotify 是一个 Linux 内核特性,它监控文件系统,并且及时向专门的应用程序发出相关的事件警告,比如 ...
- 关于Ocelot和Consul 实现GateWay(网关) 服务注册 负载均衡等方面
Ocelot 路由 请求聚合 服务发现 认证 鉴权 限流熔断 内置负载均衡器 Consul 自动服务发现 健康检查 通过Ocelot搭建API网关 服务注册 负载均衡 1. ...
- C#演示如何使用 XML 将源码编入文档
工作闲暇时间,将做工程过程中常用的代码段记录起来,下面的代码是关于C#演示如何使用 XML 将编入文档的代码,希望对大伙有较大帮助. using System; public class SomeCl ...
- Shopping List
剃须啫喱 吉列 70g $22.00 鲁阳家居专营店 剃须水套装 阿帕奇+酷曼 230g+230g $16.80(限时活动) 鲁阳家居专营店 鸡胸肉 撸铁党 100gx9+100g $49.9(限时活 ...
- SQL合并
SELECT idName,SUM(Money),SUM(Revenue)FROM ( SELECT agentID AS idName,SUM(totalMoney) AS Money,0 A ...
- 1、java的数据类型
一.基本数据类型 1.整型(byte,short,int,long) byte在内存中占用一个字节,short占用两个字节,int占用四个字节,long占用8个字节: Java语言中整型默认为int型 ...
- hdu6396（思维+输入挂）
Swordsman Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accept ...