《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 ...
随机推荐
- Vue小项目二手书商城：（一）准备工作、组件和路由
本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...
- 垂直对齐：vertical-align：super属性
<p style=”vertical-align:super;”>垂直对齐<span>上标</span></p> <p>元素默认为块级元素, ...
- 谈谈传统BIO网络编程模型的局限性与NIO
先来看看我们的server端: 创建一个serversocket,进行监听,每来一个客户端,就启动一个新启动为其服务: private void createListenSocket() { //如果 ...
- 前端开发需要掌握的SEO的知识点
SEO 工作的目的 seo 的工作目的是为了让网站更利于让各大搜索引擎抓取和收录,增加产品的曝光率. SEO 注意事项 1. 网站 TDK 标签的设置.title,description,keywor ...
- Evaluate X and Y returned from the differential equation solvers using printput frequency in Python的代码
把内容过程中经常用到的一些内容段做个备份,如下的内容是关于Evaluate X and Y returned from the differential equation solvers using ...
- 腾讯云centos7.2安装宝塔面板和LAMP
1.安装好centos7.2系统后,登录centos系统输入如下命令: yum install -y wget && wget -O install.sh http://downloa ...
- 微信小程序的MVVM思想
本文参照:[微信小程序开发]秒懂,架构及框架 同时多看:https://blog.csdn.net/qq_26585943/article/details/54378684 微信小程序开发,主要分清楚 ...
- h5微信支付在微信内页使用微信公众号支付
由于app的迭代,原本的微信支付是使用原生写的 然后h5这边做交互,现在需要修改使用h5的微信支付,于是就有了现在的这个例子,微信支付其实对于我们前端来说就是调用接口然后,根据链接进行支付,其中有点坑 ...
- jquery表单提交获取数据(带toast dialog)
最近写了一个召集令,传统表单提交注册.写写遇到的费时间的点与解决办法 git项目地址:form-demo(针对于手机版,懒人可以直接使用,有排版和样式) demo使用Jquery,toast使用jqu ...
- 剑指Offer-和为S的连续正数序列
题目: 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他就 ...